用户注册表单验证-优快云博客

本文链接：https://blog.youkuaiyun.com/Castertonone/article/details/78996681

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .hong{
    color: #FF0000;
   }
   .lv{
    color: #33FF00;
   }
   .biao{
    background-color: #AAAC90;
   }
   .biao:hover{
    background-color: #00FFFF;
   }
  </style>
  <script src="../libs/jquery-1.11.0.min.js"></script>
  <script>
   $(function(){
    var daiw;
    //十一位纯数字，1开头
    var regs = /^0?1[0-9]\d{9}$/;
    //纯数字，1开头
    var rege = /^0?1[0-9]$/;

    var regw = /^0?1[0-9]\d{16}$/;
     var reg = /^[0-9]*$/;
     //数字与字母的组合
    var zhang=/[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*/;
    //特殊字符
    var patrn=/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
    var q1=false;var q2=false;var q3=false;
    var q4=false;var q5=false;var q6=false;
    var q7=false;var q8=false;var q9=false;
    $("#name").blur(function(){
     var $name=$(this).val();
     if(!zhang.test($name)||$name==""||patrn.test($name)){
         $("#no1").show();
         $("#yes1").hide();
         q1=false;
        }else{
         $("#no1").hide()
         $("#yes1").show();
         q1=true;
     }
    });
    $("#pwd").blur(function(){
     var $pwd=$(this).val();
     if(!(/^[A-Z][A-z0-9]*$/).test($pwd)){
                                 $("#no2").show();
         $("#yes2").hide();
         q2=false;
                    }else{
                    if(!zhang.test($pwd)||$pwd==""||patrn.test($pwd)){
                    $("#no2").show();
         $("#yes2").hide();
         q2=false;
        }else{
         $("#no2").hide()
         $("#yes2").show();
         q2=true;
         daiw=$pwd;
                    }
                    }
    });
    $("#cpwd").blur(function(){
        var $cpwd=$(this).val();
        if(daiw!=$cpwd){
            $("#no3").show();
         $("#yes3").hide();
         q3=false;
        }else{
         $("#no3").hide()
         $("#yes3").show();
         q3=true;
        }
    });
    $("#nicheng").blur(function(){
        var $neicheng=$(this).val();
        if($neicheng==""){
            $("#no4").show();
         $("#yes4").hide();
         q4=false;
        }else{
         $("#no4").hide()
         $("#yes4").show();
         q4=true;
        }
    });
    $("#riqi").blur(function(){
     var $riqi=$(this).val();
     if($riqi==""){
      $("#no5").show();
         $("#yes5").hide();
         q5=false;
        }else{
         $("#no5").hide()
         $("#yes5").show();
         q5=true;
     }
    });
    $("#shenfen").blur(function(){
     var $shenfen = $(this).val();
        if(!regw.test($shenfen)){
        $("#no6").show();
         $("#yes6").hide();
         q6=false;
        }else{
         $("#no6").hide()
         $("#yes6").show();
         q6=true;
        }
    });
    $("#iphone").blur(function(){
     var $iphone = $(this).val();
        if(!regs.test($iphone)){
        $("#no7").show();
         $("#yes7").hide();
         q7=false;
        }else{
         $("#no7").hide()
         $("#yes7").show();
         q7=true;
        }
    });
    $("#qqhao").blur(function(){
     var $qqhao = $(this).val();
        if(!rege.test($qqhao)&&$qqhao.length<5){
        $("#no8").show();
         $("#yes8").hide();
         q8=false;
        }else{
         $("#no8").hide()
         $("#yes8").show();
         q8=true;
        }
    });
    $("#email").blur(function(){
        var $email=$(this).val();
        var regt=/^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.com$/gi;
        if(!regt.test($email)||$email==""){
         $("#no9").show();
         $("#yes9").hide();
         q9=false;
        }else{
         $("#no9").hide()
         $("#yes9").show();
         q9=true;
        }
       });
       $("#bt1").click(function(){
        if(q1&&q2&&q3&&q4&&q5&&q6&&q7&&q8&&q9){

         $(this).submit();
        }else{
         alert("注册失败，请检查注册信息");
         return false;
        }
       });
   });
  </script>
</head>
<body>
  <div>
   <hr style="width: 20px; height: 1px; float: left;" color="#000000" />
      <p style="float: left; float: left; margin: 0px; padding: 0px;">注册</p>
      <hr style="width: 1000px;height: 1px; float: left;" color="#000000" />
      <p style="clear: left;"></p>
  </div>
  <div style="margin-left: 50px;">
  <form action="http://www.baidu.com">
   <p>  账号<input type="text" id="name" name="name" />
      <span class="hong" id="no1" hidden="hidden">账号有误</span>
      <span class="lv" id="yes1" hidden="hidden">√</span></p>
      <p>  密码<input type="password" id="pwd" name="pwd" />
      <span class="hong" id="no2" hidden="hidden">密码有误</span>
      <span class="lv" id="yes2" hidden="hidden">√</span></p>
   <p>重复密码<input type="password" id="cpwd"/>
      <span class="hong" id="no3" hidden="hidden">密码必须一致</span>
      <span class="lv" id="yes3" hidden="hidden">√</span></p>
   <p>  昵称<input type="text" id="nicheng" name="nicheng" />
      <span class="hong" id="no4" hidden="hidden">昵称不能重复</span>
      <span class="lv" id="yes4" hidden="hidden">√</span></p>
      <p>出生日期<input type="date" id="riqi" name="riqi" />
      <span class="hong" id="no5" hidden="hidden">日期有误</span>
      <span class="lv" id="yes5" hidden="hidden">√</span></p>
      <p>  性别<input type="radio" id="man" name="sex" value="man" checked="checked" />汉子
            <input type="radio" id="woman" name="sex" value="woman"/>妹子</p>
      <p>身份证号<input type="text" id="shenfen" name="shenfen" />
      <span class="hong" id="no6" hidden="hidden">身份证号有误</span>
      <span class="lv" id="yes6" hidden="hidden">√</span></p>
      <p> 手机号<input type="text" id="iphone" name="iphone" />
      <span class="hong" id="no7" hidden="hidden">手机号有误</span>
      <span class="lv" id="yes7" hidden="hidden">√</span></p>
   <p>   QQ<input type="text" id="qqhao" name="qqhao" />
      <span class="hong" id="no8" hidden="hidden">QQ号有误</span>
      <span class="lv" id="yes8" hidden="hidden">√</span></p>
   <p>  邮箱<input type="email" id="email" name="email" />
      <span class="hong" id="no9" hidden="hidden">邮箱有误</span>
      <span class="lv" id="yes9" hidden="hidden">√</span></p>
   <p>   <input type="submit" id="bt1" value="注册" class="biao" />
        
   <input type="reset" id="bt2" value="清空" class="biao" /></p>
  </form>
  </div>
</body>
</html>

jQuery的表单验证