验证码案例大全
1. 常规随机字母验证 2. 3. <script type="text/javascript"> 4. var code; 5. function createCode() 6. { 7. code = ""; 8. var codeLength = 6; //验证码的长度 9. var checkCode = document.getElementById("checkCode"); 10. var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11. 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z', 12. 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //全部候选组成验证码的字符，固然也能够用中文的 13. for(var i = 0; i < codeLength; i++) 14. { 15. var charNum = Math.floor(Math.random() * 52); 16. code += codeChars[charNum]; 17. } 18. if(checkCode) 19. { 20. checkCode.className = "code"; 21. checkCode.innerHTML = code; 22. } 23. } 24. function validateCode() 25. { 26. var inputCode=document.getElementById("inputCode").value; 27. if(inputCode.length <= 0) 28. { 29. alert("请输入验证码！"); 30. } 31. else if(inputCode.toUpperCase() != code.toUpperCase()) 32. { 33. alert("验证码输入有误！"); 34. createCode(); 35. } 36. else 37. { 38. alert("验证码正确！"); 39. } 40. } 41. </script> ------------------------------------------------------------------------------------------------------------------------ 1. 常规的数字加减验证 2. 3. var code ; //在全局定义验证码 4. //产生验证码 5. window.onload = function createCode(){ 6. code = ""; 7. var codeLength = 4;//验证码的长度 8. var checkCode = document.getElementById("code"); 9. var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 10. 'S','T','U','V','W','X','Y','Z');//随机数 11. for(var i = 0; i < codeLength; i++) {//循环操做 12. var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35） 13. code += random[index];//根据索引取得随机数加到code上 14. } 15. checkCode.value = code;//把code值赋给验证码 16. } 17. //校验验证码 18. function validate(){ 19. var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写 20. if(inputCode.length <= 0) { //若输入的验证码长度为0 21. alert("请输入验证码！"); //则弹出请输入验证码 22. } 23. else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时 24. alert("验证码输入错误！@_@"); //则弹出验证码输入错误 25. createCode();//刷新验证码 26. document.getElementById("input").value = "";//清空文本框 27. } 28. else { //输入正确时 29. alert("^-^"); //弹出^-^ 30. } 31. } 前端实现伪验证：数字加减 - <script type="text/javascript" language="javascript"> - - function getverifycode(){ - var i = parseInt(10 * Math.random()); - var j = parseInt(10 * Math.random()); - var k = i + j; - $("#hiddencode").val(k); - $("#showspan").html(" " + i + " + " + j + " = "); - } - - function getverifycodeChange(){ - var i = parseInt(10 * Math.random()); - var j = parseInt(10 * Math.random()); - var k = i + j; - $("#hiddencode").val(k); - $("#showspan").html(" " + i + " + " + j + " = "); - $("#verifycode").focus(); - }</script> 短信验证 短信验证以前必需要确认如下四点样式及其展现方式 1.点击获取验证码以前的样式： 2.输入正确的手机号后点击获取验证码以后的样式 3.若是手机号已经被注册的样式： 4.若是一个手机号一天发送超过3次就提示不能发送： 短信验证的JS脚本 - var InterValObj; //timer变量，控制时间 - var count = 120; //间隔函数，1秒执行 - var curCount;//当前剩余秒数 - var code = ""; //验证码 - var codeLength = 6;//验证码长度 - - function sendMessage() { - curCount = count; - var jbPhone = $("#jbPhone").val(); - var jbPhoneTip = $("#jbPhoneTip").text(); - if (jbPhone != "") { - if(jbPhoneTip == "√ 该手机号码能够注册，输入正确" || jbPhoneTip == "√ 短信验证码已发到您的手机,请查收"){ - // 产生验证码 - for ( var i = 0; i < codeLength; i++) { - code += parseInt(Math.random() * 9).toString(); - } - // 设置button效果，开始计时 - $("#btnSendCode").attr("disabled", "true"); - $("#btnSendCode").val("请在" + curCount + "秒内输入验证码"); - InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器，1秒执行一次 - // 向后台发送处理数据 - $.ajax({ - type: "POST", // 用POST方式传输 - dataType: "text", // 数据格式:JSON - url: "UserAction_sms.action", // 目标地址 - data: "jbPhone=" + jbPhone +"&code=" + code, - error: function (XMLHttpRequest, textStatus, errorThrown) { - - }, - success: function (data){ - data = parseInt(data, 10); - if(data == 1){ - $("#jbPhoneTip").html("<font color='#339933'>√ 短信验证码已发到您的手机,请查收</font>"); - }else if(data == 0){ - $("#jbPhoneTip").html("<font color='red'>× 短信验证码发送失败，请从新发送</font>"); - }else if(data == 2){ - $("#jbPhoneTip").html("<font color='red'>× 该手机号码今天发送验证码过多</font>"); - } - } - }); - } - }else{ - $("#jbPhoneTip").html("<font color='red'>× 手机号码不能为空</font>"); - } - } - - //timer处理函数 - function SetRemainTime() { - if (curCount == 0) { - window.clearInterval(InterValObj);// 中止计时器 - $("#btnSendCode").removeAttr("disabled");// 启用按钮 - $("#btnSendCode").val("从新发送验证码"); - code = ""; // 清除验证码。若是不清除，过期间后，输入收到的验证码依然有效 - }else { - curCount--; - $("#btnSendCode").val("请在" + curCount + "秒内输入验证码"); - } - } - - $(document).ready(function() { - $("#SmsCheckCode").blur(function() { - var SmsCheckCodeVal = $("#SmsCheckCode").val(); - // 向后台发送处理数据 - $.ajax({ - url : "UserAction_checkCode.action", - data : {SmsCheckCode : SmsCheckCodeVal}, - type : "POST", - dataType : "text", - success : function(data) { - data = parseInt(data, 10); - if (data == 1) { - $("#SmsCheckCodeTip").html("<font color='#339933'>√ 短信验证码正确，请继续</font>"); - } else { - $("#SmsCheckCodeTip").html("<font color='red'>× 短信验证码有误，请核实后从新填写</font>"); - } - } - }); - }); - }); ----------------------------------------------------------------------------------------------------------------------- - function trim(str) { - var strnew = str.replace(/^\s*|\s*$/g, ""); - return strnew; - } - //用户名 - function checkusername() { - var username = document.form1.username.value; - if (username == "" || !isNaN(username.charAt(0))) { - document.getElementById("usernameTip").innerHTML = "<font color='red'>× 首字母不能为数字或者用户名不能为空</font>"; - return false; - } else if (username.length < 6 || username.length > 30) { - document.getElementById("usernameTip").innerHTML = "<font color='red'>× 用户名长度为6-30位字符</font>"; - return false; - } else { - document.getElementById("usernameTip").innerHTML = "<font color='#339933'>√ 用户名合格</font>"; - // 向后台发送处理数据 - $.ajax({ - url : "UserAction_checkUserName.action",// 目标地址 - data : {username : username}, // 目标参数 - type : "POST", // 用POST方式传输 - dataType : "text", // 数据格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#usernameTip").html("<font color='red'>× 该用户名已经被注册，请从新输入</font>"); - } else { - $("#usernameTip").html("<font color='#339933'>√ 该用户名能够注册，输入正确</font>"); - } - } - }); - return true; - } - } - // 登陆密码 - function checkpassword() { - var password = document.form1.password.value; - if (password.length < 6 || password.length > 30) { - document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密码长度不能小于6位，大于30位</font>"; - return false; - } else if (!isNaN(password)) { - document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密码不能全是数字</font>"; - return false; - } else { - document.getElementById("passwordTip").innerHTML = "<font color='#339933'>√ 密码合格</font>"; - return true; - } - } - // 确认密码 - function checkpasswrodb() { - var password = document.form1.password.value; - var passwordRepeat = document.form1.passwordRepeat.value; - if (trim(password) != trim(passwordRepeat)) { - document.getElementById("passwordRepeatTip").innerHTML = "<font color='red'>× 两次密码输入必须一致</font>"; - return false; - } else { - document.getElementById("passwordRepeatTip").innerHTML = "<font color='#339933'>√ 密码输入一致</font>"; - return true; - } - } - // 姓名 - function checknickname() { - var nickname = document.form1.nickname.value; - if (trim(nickname) == "") { - document.getElementById("nicknameTip").innerHTML = "<font color='red'>× 姓名不能为空</font>"; - return false; - } else { - document.getElementById("nicknameTip").innerHTML = "<font color='#339933'>√ 姓名输入正确</font>"; - return true; - } - } - // 联系手机(ajax验证手机号码是否已经存在) - function checkjbPhone() { - var jbPhone = document.form1.jbPhone.value; - var re= /(^1[3|5|8][0-9]{9}$)/; - if (trim(jbPhone) == "") { - document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 手机号码不能为空</font>"; - return false; - } else if(trim(jbPhone) != ""){ - if(!re.test(jbPhone)){ - document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 请输入有效的手机号码</font>"; - return false; - }else{ - document.getElementById("jbPhoneTip").innerHTML = "<font color='#339933'>√ 手机号码输入正确</font>"; - // 向后台发送处理数据 - $.ajax({ - url : "UserAction_checkPhone.action",// 目标地址 - data : {jbPhone : jbPhone}, // 目标参数 - type : "POST", // 用POST方式传输 - dataType : "text", // 数据格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#jbPhoneTip").html("<font color='red'>× 该手机号码已经被注册，请从新输入</font>"); - } else { - $("#jbPhoneTip").html("<font color='#339933'>√ 该手机号码能够注册，输入正确</font>"); - } - } - }); - return true; - } - } - - } - // 证件号码 - function checkjbCredentialsCode() { - var jbCredentialsCode = document.form1.jbCredentialsCode.value; - var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; - if (trim(jbCredentialsCode) == "") { - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 证件号码不能为空</font>"; - return false; - } else if(trim(jbCredentialsCode) != ""){ - if(!reg.test(jbCredentialsCode)){ - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 请输入合法的证件号码</font>"; - return false; - }else{ - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='#339933'>√ 证件号码输入正确</font>"; - // 向后台发送处理数据 - $.ajax({ - url : "UserAction_checkCredentialsCode.action",// 目标地址 - data : {jbCredentialsCode : jbCredentialsCode}, // 目标参数 - type : "POST", // 用POST方式传输 - dataType : "text", // 数据格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#jbCredentialsCodeTip").html("<font color='red'>× 该证件号码已经被注册，请从新输入</font>"); - } else { - $("#jbCredentialsCodeTip").html("<font color='#339933'>√ 该证件号码能够注册，输入正确</font>"); - } - } - }); - return true; - } - } - } - // 所在地区 - function checkjbSourceArea() { - var jbSourceArea = document.form1.jbSourceArea.value; - if (trim(jbSourceArea) == "") { - document.getElementById("jbSourceAreaTip").innerHTML = "<font color='red'>× 请选择所在地区</font>"; - return false; - } else { - document.getElementById("jbSourceAreaTip").innerHTML = "<font color='#339933'>√ 所在地区选择正确</font>"; - return true; - } - } - // 验证码 - function checkNumber() { - var checkNum = document.form1.checkNum.value; - if (trim(checkNum) == "") { - document.getElementById("checkNumTip").innerHTML = "<font color='red'>× 验证码不能为空</font>"; - return false; - } else { - document.getElementById("checkNumTip").innerHTML = "<font color='#339933'>√ 验证码合格</font>"; - // 向后台发送处理数据 - $.ajax({ - url : "UserAction_checkNum.action",// 目标地址 - data : {checkNum : checkNum}, // 目标参数 - type : "POST", // 用POST方式传输 - dataType : "text", // 数据格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#checkNumTip").html("<font color='red'>× 验证码错误</font>"); - } else { - $("#checkNumTip").html("<font color='#339933'>√ 验证码正确</font>"); - } - } - }); - return true; - } - } 3、后台调用短信验证平台或者第三方公司为咱们体统的验证方法去验证。
1. 常规随机字母验证 2. 3. <script type="text/javascript"> 4. var code; 5. function createCode() 6. { 7. code = ""; 8. var codeLength = 6; //验证码的长度 9. var checkCode = document.getElementById("checkCode"); 10. var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11. 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z', 12. 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //全部候选组成验证码的字符，固然也能够用中文的 13. for(var i = 0; i < codeLength; i++) 14. { 15. var charNum = Math.floor(Math.random() * 52); 16. code += codeChars[charNum]; 17. } 18. if(checkCode) 19. { 20. checkCode.className = "code"; 21. checkCode.innerHTML = code; 22. } 23. } 24. function validateCode() 25. { 26. var inputCode=document.getElementById("inputCode").value; 27. if(inputCode.length <= 0) 28. { 29. alert("请输入验证码！"); 30. } 31. else if(inputCode.toUpperCase() != code.toUpperCase()) 32. { 33. alert("验证码输入有误！"); 34. createCode(); 35. } 36. else 37. { 38. alert("验证码正确！"); 39. } 40. } 41. </script> ------------------------------------------------------------------------------------------------------------------------ 1. 常规的数字加减验证 2. 3. var code ; //在全局定义验证码 4. //产生验证码 5. window.onload = function createCode(){ 6. code = ""; 7. var codeLength = 4;//验证码的长度 8. var checkCode = document.getElementById("code"); 9. var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 10. 'S','T','U','V','W','X','Y','Z');//随机数 11. for(var i = 0; i < codeLength; i++) {//循环操做 12. var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35） 13. code += random[index];//根据索引取得随机数加到code上 14. } 15. checkCode.value = code;//把code值赋给验证码 16. } 17. //校验验证码 18. function validate(){ 19. var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写 20. if(inputCode.length <= 0) { //若输入的验证码长度为0 21. alert("请输入验证码！"); //则弹出请输入验证码 22. } 23. else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时 24. alert("验证码输入错误！@_@"); //则弹出验证码输入错误 25. createCode();//刷新验证码 26. document.getElementById("input").value = "";//清空文本框 27. } 28. else { //输入正确时 29. alert("^-^"); //弹出^-^ 30. } 31. } 前端实现伪验证：数字加减 - <script type="text/javascript" language="javascript"> - - function getverifycode(){ - var i = parseInt(10 * Math.random()); - var j = parseInt(10 * Math.random()); - var k = i + j; - $("#hiddencode").val(k); - $("#showspan").html(" " + i + " + " + j + " = "); - } - - function getverifycodeChange(){ - var i = parseInt(10 * Math.random()); - var j = parseInt(10 * Math.random()); - var k = i + j; - $("#hiddencode").val(k); - $("#showspan").html(" " + i + " + " + j + " = "); - $("#verifycode").focus(); - }</script> 短信验证 短信验证以前必需要确认如下四点样式及其展现方式 1.点击获取验证码以前的样式： 2.输入正确的手机号后点击获取验证码以后的样式 3.若是手机号已经被注册的样式： 4.若是一个手机号一天发送超过3次就提示不能发送： 短信验证的JS脚本 - var InterValObj; //timer变量，控制时间 - var count = 120; //间隔函数，1秒执行 - var curCount;//当前剩余秒数 - var code = ""; //验证码 - var codeLength = 6;//验证码长度 - - function sendMessage() { - curCount = count; - var jbPhone = $("#jbPhone").val(); - var jbPhoneTip = $("#jbPhoneTip").text(); - if (jbPhone != "") { - if(jbPhoneTip == "√ 该手机号码能够注册，输入正确" || jbPhoneTip == "√ 短信验证码已发到您的手机,请查收"){ - // 产生验证码 - for ( var i = 0; i < codeLength; i++) { - code += parseInt(Math.random() * 9).toString(); - } - // 设置button效果，开始计时 - $("#btnSendCode").attr("disabled", "true"); - $("#btnSendCode").val("请在" + curCount + "秒内输入验证码"); - InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器，1秒执行一次 - // 向后台发送处理数据 - $.ajax({ - type: "POST", // 用POST方式传输 - dataType: "text", // 数据格式:JSON - url: "UserAction_sms.action", // 目标地址 - data: "jbPhone=" + jbPhone +"&code=" + code, - error: function (XMLHttpRequest, textStatus, errorThrown) { - - }, - success: function (data){ - data = parseInt(data, 10); - if(data == 1){ - $("#jbPhoneTip").html("<font color='#339933'>√ 短信验证码已发到您的手机,请查收</font>"); - }else if(data == 0){ - $("#jbPhoneTip").html("<font color='red'>× 短信验证码发送失败，请从新发送</font>"); - }else if(data == 2){ - $("#jbPhoneTip").html("<font color='red'>× 该手机号码今天发送验证码过多</font>"); - } - } - }); - } - }else{ - $("#jbPhoneTip").html("<font color='red'>× 手机号码不能为空</font>"); - } - } - - //timer处理函数 - function SetRemainTime() { - if (curCount == 0) { - window.clearInterval(InterValObj);// 中止计时器 - $("#btnSendCode").removeAttr("disabled");// 启用按钮 - $("#btnSendCode").val("从新发送验证码"); - code = ""; // 清除验证码。若是不清除，过期间后，输入收到的验证码依然有效 - }else { - curCount--; - $("#btnSendCode").val("请在" + curCount + "秒内输入验证码"); - } - } - - $(document).ready(function() { - $("#SmsCheckCode").blur(function() { - var SmsCheckCodeVal = $("#SmsCheckCode").val(); - // 向后台发送处理数据 - $.ajax({ - url : "UserAction_checkCode.action", - data : {SmsCheckCode : SmsCheckCodeVal}, - type : "POST", - dataType : "text", - success : function(data) { - data = parseInt(data, 10); - if (data == 1) { - $("#SmsCheckCodeTip").html("<font color='#339933'>√ 短信验证码正确，请继续</font>"); - } else { - $("#SmsCheckCodeTip").html("<font color='red'>× 短信验证码有误，请核实后从新填写</font>"); - } - } - }); - }); - }); ----------------------------------------------------------------------------------------------------------------------- - function trim(str) { - var strnew = str.replace(/^\s*|\s*$/g, ""); - return strnew; - } - //用户名 - function checkusername() { - var username = document.form1.username.value; - if (username == "" || !isNaN(username.charAt(0))) { - document.getElementById("usernameTip").innerHTML = "<font color='red'>× 首字母不能为数字或者用户名不能为空</font>"; - return false; - } else if (username.length < 6 || username.length > 30) { - document.getElementById("usernameTip").innerHTML = "<font color='red'>× 用户名长度为6-30位字符</font>"; - return false; - } else { - document.getElementById("usernameTip").innerHTML = "<font color='#339933'>√ 用户名合格</font>"; - // 向后台发送处理数据 - $.ajax({ - url : "UserAction_checkUserName.action",// 目标地址 - data : {username : username}, // 目标参数 - type : "POST", // 用POST方式传输 - dataType : "text", // 数据格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#usernameTip").html("<font color='red'>× 该用户名已经被注册，请从新输入</font>"); - } else { - $("#usernameTip").html("<font color='#339933'>√ 该用户名能够注册，输入正确</font>"); - } - } - }); - return true; - } - } - // 登陆密码 - function checkpassword() { - var password = document.form1.password.value; - if (password.length < 6 || password.length > 30) { - document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密码长度不能小于6位，大于30位</font>"; - return false; - } else if (!isNaN(password)) { - document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密码不能全是数字</font>"; - return false; - } else { - document.getElementById("passwordTip").innerHTML = "<font color='#339933'>√ 密码合格</font>"; - return true; - } - } - // 确认密码 - function checkpasswrodb() { - var password = document.form1.password.value; - var passwordRepeat = document.form1.passwordRepeat.value; - if (trim(password) != trim(passwordRepeat)) { - document.getElementById("passwordRepeatTip").innerHTML = "<font color='red'>× 两次密码输入必须一致</font>"; - return false; - } else { - document.getElementById("passwordRepeatTip").innerHTML = "<font color='#339933'>√ 密码输入一致</font>"; - return true; - } - } - // 姓名 - function checknickname() { - var nickname = document.form1.nickname.value; - if (trim(nickname) == "") { - document.getElementById("nicknameTip").innerHTML = "<font color='red'>× 姓名不能为空</font>"; - return false; - } else { - document.getElementById("nicknameTip").innerHTML = "<font color='#339933'>√ 姓名输入正确</font>"; - return true; - } - } - // 联系手机(ajax验证手机号码是否已经存在) - function checkjbPhone() { - var jbPhone = document.form1.jbPhone.value; - var re= /(^1[3|5|8][0-9]{9}$)/; - if (trim(jbPhone) == "") { - document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 手机号码不能为空</font>"; - return false; - } else if(trim(jbPhone) != ""){ - if(!re.test(jbPhone)){ - document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 请输入有效的手机号码</font>"; - return false; - }else{ - document.getElementById("jbPhoneTip").innerHTML = "<font color='#339933'>√ 手机号码输入正确</font>"; - // 向后台发送处理数据 - $.ajax({ - url : "UserAction_checkPhone.action",// 目标地址 - data : {jbPhone : jbPhone}, // 目标参数 - type : "POST", // 用POST方式传输 - dataType : "text", // 数据格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#jbPhoneTip").html("<font color='red'>× 该手机号码已经被注册，请从新输入</font>"); - } else { - $("#jbPhoneTip").html("<font color='#339933'>√ 该手机号码能够注册，输入正确</font>"); - } - } - }); - return true; - } - } - - } - // 证件号码 - function checkjbCredentialsCode() { - var jbCredentialsCode = document.form1.jbCredentialsCode.value; - var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; - if (trim(jbCredentialsCode) == "") { - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 证件号码不能为空</font>"; - return false; - } else if(trim(jbCredentialsCode) != ""){ - if(!reg.test(jbCredentialsCode)){ - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 请输入合法的证件号码</font>"; - return false; - }else{ - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='#339933'>√ 证件号码输入正确</font>"; - // 向后台发送处理数据 - $.ajax({ - url : "UserAction_checkCredentialsCode.action",// 目标地址 - data : {jbCredentialsCode : jbCredentialsCode}, // 目标参数 - type : "POST", // 用POST方式传输 - dataType : "text", // 数据格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#jbCredentialsCodeTip").html("<font color='red'>× 该证件号码已经被注册，请从新输入</font>"); - } else { - $("#jbCredentialsCodeTip").html("<font color='#339933'>√ 该证件号码能够注册，输入正确</font>"); - } - } - }); - return true; - } - } - } - // 所在地区 - function checkjbSourceArea() { - var jbSourceArea = document.form1.jbSourceArea.value; - if (trim(jbSourceArea) == "") { - document.getElementById("jbSourceAreaTip").innerHTML = "<font color='red'>× 请选择所在地区</font>"; - return false; - } else { - document.getElementById("jbSourceAreaTip").innerHTML = "<font color='#339933'>√ 所在地区选择正确</font>"; - return true; - } - } - // 验证码 - function checkNumber() { - var checkNum = document.form1.checkNum.value; - if (trim(checkNum) == "") { - document.getElementById("checkNumTip").innerHTML = "<font color='red'>× 验证码不能为空</font>"; - return false; - } else { - document.getElementById("checkNumTip").innerHTML = "<font color='#339933'>√ 验证码合格</font>"; - // 向后台发送处理数据 - $.ajax({ - url : "UserAction_checkNum.action",// 目标地址 - data : {checkNum : checkNum}, // 目标参数 - type : "POST", // 用POST方式传输 - dataType : "text", // 数据格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#checkNumTip").html("<font color='red'>× 验证码错误</font>"); - } else { - $("#checkNumTip").html("<font color='#339933'>√ 验证码正确</font>"); - } - } - }); - return true; - } - } 3、后台调用短信验证平台或者第三方公司为咱们体统的验证方法去验证。
- 常规随机字母验证
- <script type="text/javascript">
- var code;
- function createCode()
- {
- code = "";
- var codeLength = 6; //验证码的长度
- var checkCode = document.getElementById("checkCode");
- var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
- 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
- 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //全部候选组成验证码的字符，固然也能够用中文的
- for(var i = 0; i < codeLength; i++)
- {
- var charNum = Math.floor(Math.random() * 52);
- code += codeChars[charNum];
- }
- if(checkCode)
- {
- checkCode.className = "code";
- checkCode.innerHTML = code;
- }
- }
- function validateCode()
- {
- var inputCode=document.getElementById("inputCode").value;
- if(inputCode.length <= 0)
- {
- alert("请输入验证码！");
- }
- else if(inputCode.toUpperCase() != code.toUpperCase())
- {
- alert("验证码输入有误！");
- createCode();
- }
- else
- {
- alert("验证码正确！");
- }
- }
- </script>
------------------------------------------------------------------------------------------------------------------------
短信验证以前必需要确认如下四点样式及其展现方式
1.点击获取验证码以前的样式：
2.输入正确的手机号后点击获取验证码以后的样式
3.若是手机号已经被注册的样式：
4.若是一个手机号一天发送超过3次就提示不能发送：
短信验证的JS脚本
- var InterValObj; //timer变量，控制时间
- var count = 120; //间隔函数，1秒执行
- var curCount;//当前剩余秒数
- var code = ""; //验证码
- var codeLength = 6;//验证码长度
-
- function sendMessage() {
- curCount = count;
- var jbPhone = $("#jbPhone").val();
- var jbPhoneTip = $("#jbPhoneTip").text();
- if (jbPhone != "") {
- if(jbPhoneTip == "√ 该手机号码能够注册，输入正确" || jbPhoneTip == "√ 短信验证码已发到您的手机,请查收"){
- // 产生验证码
- for ( var i = 0; i < codeLength; i++) {
- code += parseInt(Math.random() * 9).toString();
- }
- // 设置button效果，开始计时
- $("#btnSendCode").attr("disabled", "true");
- $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
- InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器，1秒执行一次
- // 向后台发送处理数据
- $.ajax({
- type: "POST", // 用POST方式传输
- dataType: "text", // 数据格式:JSON
- url: "UserAction_sms.action", // 目标地址
- data: "jbPhone=" + jbPhone +"&code=" + code,
- error: function (XMLHttpRequest, textStatus, errorThrown) {
-
- },
- success: function (data){
- data = parseInt(data, 10);
- if(data == 1){
- $("#jbPhoneTip").html("<font color='#339933'>√ 短信验证码已发到您的手机,请查收</font>");
- }else if(data == 0){
- $("#jbPhoneTip").html("<font color='red'>× 短信验证码发送失败，请从新发送</font>");
- }else if(data == 2){
- $("#jbPhoneTip").html("<font color='red'>× 该手机号码今天发送验证码过多</font>");
- }
- }
- });
- }
- }else{
- $("#jbPhoneTip").html("<font color='red'>× 手机号码不能为空</font>");
- }
- }
-
- //timer处理函数
- function SetRemainTime() {
- if (curCount == 0) {
- window.clearInterval(InterValObj);// 中止计时器
- $("#btnSendCode").removeAttr("disabled");// 启用按钮
- $("#btnSendCode").val("从新发送验证码");
- code = ""; // 清除验证码。若是不清除，过期间后，输入收到的验证码依然有效
- }else {
- curCount--;
- $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
- }
- }
-
- $(document).ready(function() {
- $("#SmsCheckCode").blur(function() {
- var SmsCheckCodeVal = $("#SmsCheckCode").val();
- // 向后台发送处理数据
- $.ajax({
- url : "UserAction_checkCode.action",
- data : {SmsCheckCode : SmsCheckCodeVal},
- type : "POST",
- dataType : "text",
- success : function(data) {
- data = parseInt(data, 10);
- if (data == 1) {
- $("#SmsCheckCodeTip").html("<font color='#339933'>√ 短信验证码正确，请继续</font>");
- } else {
- $("#SmsCheckCodeTip").html("<font color='red'>× 短信验证码有误，请核实后从新填写</font>");
- }
- }
- });
- });
- });
-----------------------------------------------------------------------------------------------------------------------
- function trim(str) {
- var strnew = str.replace(/^\s*|\s*$/g, "");
- return strnew;
- }
- //用户名
- function checkusername() {
- var username = document.form1.username.value;
- if (username == "" || !isNaN(username.charAt(0))) {
- document.getElementById("usernameTip").innerHTML = "<font color='red'>× 首字母不能为数字或者用户名不能为空</font>";
- return false;
- } else if (username.length < 6 || username.length > 30) {
- document.getElementById("usernameTip").innerHTML = "<font color='red'>× 用户名长度为6-30位字符</font>";
- return false;
- } else {
- document.getElementById("usernameTip").innerHTML = "<font color='#339933'>√ 用户名合格</font>";
- // 向后台发送处理数据
- $.ajax({
- url : "UserAction_checkUserName.action",// 目标地址
- data : {username : username}, // 目标参数
- type : "POST", // 用POST方式传输
- dataType : "text", // 数据格式:text
- success : function(data) {
- data = parseInt(data, 10);
- if (data != 0) {
- $("#usernameTip").html("<font color='red'>× 该用户名已经被注册，请从新输入</font>");
- } else {
- $("#usernameTip").html("<font color='#339933'>√ 该用户名能够注册，输入正确</font>");
- }
- }
- });
- return true;
- }
- }
- // 登陆密码
- function checkpassword() {
- var password = document.form1.password.value;
- if (password.length < 6 || password.length > 30) {
- document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密码长度不能小于6位，大于30位</font>";
- return false;
- } else if (!isNaN(password)) {
- document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密码不能全是数字</font>";
- return false;
- } else {
- document.getElementById("passwordTip").innerHTML = "<font color='#339933'>√ 密码合格</font>";
- return true;
- }
- }
- // 确认密码
- function checkpasswrodb() {
- var password = document.form1.password.value;
- var passwordRepeat = document.form1.passwordRepeat.value;
- if (trim(password) != trim(passwordRepeat)) {
- document.getElementById("passwordRepeatTip").innerHTML = "<font color='red'>× 两次密码输入必须一致</font>";
- return false;
- } else {
- document.getElementById("passwordRepeatTip").innerHTML = "<font color='#339933'>√ 密码输入一致</font>";
- return true;
- }
- }
- // 姓名
- function checknickname() {
- var nickname = document.form1.nickname.value;
- if (trim(nickname) == "") {
- document.getElementById("nicknameTip").innerHTML = "<font color='red'>× 姓名不能为空</font>";
- return false;
- } else {
- document.getElementById("nicknameTip").innerHTML = "<font color='#339933'>√ 姓名输入正确</font>";
- return true;
- }
- }
- // 联系手机(ajax验证手机号码是否已经存在)
- function checkjbPhone() {
- var jbPhone = document.form1.jbPhone.value;
- var re= /(^1[3|5|8][0-9]{9}$)/;
- if (trim(jbPhone) == "") {
- document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 手机号码不能为空</font>";
- return false;
- } else if(trim(jbPhone) != ""){
- if(!re.test(jbPhone)){
- document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 请输入有效的手机号码</font>";
- return false;
- }else{
- document.getElementById("jbPhoneTip").innerHTML = "<font color='#339933'>√ 手机号码输入正确</font>";
- // 向后台发送处理数据
- $.ajax({
- url : "UserAction_checkPhone.action",// 目标地址
- data : {jbPhone : jbPhone}, // 目标参数
- type : "POST", // 用POST方式传输
- dataType : "text", // 数据格式:text
- success : function(data) {
- data = parseInt(data, 10);
- if (data != 0) {
- $("#jbPhoneTip").html("<font color='red'>× 该手机号码已经被注册，请从新输入</font>");
- } else {
- $("#jbPhoneTip").html("<font color='#339933'>√ 该手机号码能够注册，输入正确</font>");
- }
- }
- });
- return true;
- }
- }
-
- }
- // 证件号码
- function checkjbCredentialsCode() {
- var jbCredentialsCode = document.form1.jbCredentialsCode.value;
- var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
- if (trim(jbCredentialsCode) == "") {
- document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 证件号码不能为空</font>";
- return false;
- } else if(trim(jbCredentialsCode) != ""){
- if(!reg.test(jbCredentialsCode)){
- document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 请输入合法的证件号码</font>";
- return false;
- }else{
- document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='#339933'>√ 证件号码输入正确</font>";
- // 向后台发送处理数据
- $.ajax({
- url : "UserAction_checkCredentialsCode.action",// 目标地址
- data : {jbCredentialsCode : jbCredentialsCode}, // 目标参数
- type : "POST", // 用POST方式传输
- dataType : "text", // 数据格式:text
- success : function(data) {
- data = parseInt(data, 10);
- if (data != 0) {
- $("#jbCredentialsCodeTip").html("<font color='red'>× 该证件号码已经被注册，请从新输入</font>");
- } else {
- $("#jbCredentialsCodeTip").html("<font color='#339933'>√ 该证件号码能够注册，输入正确</font>");
- }
- }
- });
- return true;
- }
- }
- }
- // 所在地区
- function checkjbSourceArea() {
- var jbSourceArea = document.form1.jbSourceArea.value;
- if (trim(jbSourceArea) == "") {
- document.getElementById("jbSourceAreaTip").innerHTML = "<font color='red'>× 请选择所在地区</font>";
- return false;
- } else {
- document.getElementById("jbSourceAreaTip").innerHTML = "<font color='#339933'>√ 所在地区选择正确</font>";
- return true;
- }
- }
- // 验证码
- function checkNumber() {
- var checkNum = document.form1.checkNum.value;
- if (trim(checkNum) == "") {
- document.getElementById("checkNumTip").innerHTML = "<font color='red'>× 验证码不能为空</font>";
- return false;
- } else {
- document.getElementById("checkNumTip").innerHTML = "<font color='#339933'>√ 验证码合格</font>";
- // 向后台发送处理数据
- $.ajax({
- url : "UserAction_checkNum.action",// 目标地址
- data : {checkNum : checkNum}, // 目标参数
- type : "POST", // 用POST方式传输
- dataType : "text", // 数据格式:text
- success : function(data) {
- data = parseInt(data, 10);
- if (data != 0) {
- $("#checkNumTip").html("<font color='red'>× 验证码错误</font>");
- } else {
- $("#checkNumTip").html("<font color='#339933'>√ 验证码正确</font>");
- }
- }
- });
- return true;
- }
- }
3、
后台调用短信验证平台或者第三方公司为咱们体统的验证方法去验证。
相关文章
- 1. servlet--验证码案例
- 2. session之验证码案例
- 3. Session--验证码案例（Java）
- 4. JavaWeb——servlet案例之：验证码校验
- 5. 深度学习之验证码案例
- 6. js案例——实现验证码功能
- 7. Axure RP（七）案例（发送验证码）
- 8. session完成验证码案例
- 9. Django+Jquery+Ajax+验证码登录案例
- 10. jquery验证大全
- 更多相关文章...
- • Docker 命令大全 - Docker教程
- • XML 验证 - XML 教程
- • JDK13 GA发布：5大特性解读
- • Tomcat学习笔记（史上最全tomcat学习笔记）
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安装cuda+cuDNN
- 2. GitHub的使用说明
- 3. phpDocumentor使用教程【安装PHPDocumentor】
- 4. yarn run build报错Component is not found in path “npm/taro-ui/dist/weapp/components/rate/index“
- 5. 精讲Haproxy搭建Web集群
- 6. 安全测试基础之MySQL
- 7. C/C++编程笔记：C语言中的复杂声明分析，用实例带你完全读懂
- 8. Python3教程(1)----搭建Python环境
- 9. 李宏毅机器学习课程笔记2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里云ECS配置速记
欢迎关注本站公众号,获取更多信息
相关文章