验证码案例大全

    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;
-     }
- }

三、后台调用短信验证平台或者第三方公司为我们体统的验证方法去验证。

 

    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;
-     }
- }

三、后台调用短信验证平台或者第三方公司为我们体统的验证方法去验证。

 

 

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;

-     }

- }

 

三、后台调用短信验证平台或者第三方公司为我们体统的验证方法去验证。