jQuery登录验证

来源：互联网发布：移动宽带网络连接不上编辑：程序博客网时间：2024/06/05 02:53

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>登录</title>
       <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
       <script type="text/javascript">
           $(function(){
               var flag=false;
               $("span").hide();
               $("b").hide();
               //姓名
               $("input:eq(0)").blur(function(){
                   var name=$("input:eq(0)").val();
                   if(name==""){
                       $("span:eq(0)").show();
                       $("b:eq(0)").hide();
                       flag=false;
                   }else{
                       $("span:eq(0)").hide();
                       $("b:eq(0)").show();
                       flag=true;
                   }
                   $("input:eq(1)").focus();
               });
               $("a").click(function(){
                   $("input:eq(1)").focus();
               });
               //密码
               $("input:eq(1)").blur(function(){
                   var pwd=$("input:eq(1)").val();
                   if(pwd.length<6||pwd.length>12){
                       $("span:eq(1)").show();
                       $("b:eq(1)").hide();
                       flag=false;
                   }else{
                       $("span:eq(1)").hide();
                       $("b:eq(1)").show();
                       flag=true;
                   }
                   $("input:eq(2)").focus();
               });
               //确认密码
               $("input:eq(2)").blur(function(){
                   var pwd=$("input:eq(1)").val();
                   var repwd=$("input:eq(2)").val();
                   if(repwd===pwd||repwd==""){
                       $("span:eq(2)").hide();
                       $("b:eq(2)").show();
                       flag=true;
                   }else{
                       $("span:eq(2)").show();
                       $("b:eq(2)").hide();
                       flag=false;
                   }
               });
               //邮箱
               $("input:eq(3)").blur(function(){
                   var email=$("input:eq(3)").val();
                   if(email.indexOf("@")<0){
                       $("span:eq(3)").show();
                       $("b:eq(3)").hide();
                       flag=false;
                   }else{
                       $("span:eq(3)").hide();
                       $("b:eq(3)").show();
                       flag=true;
                   }
               });
               //手机号
               $("input:eq(4)").blur(function(){
                   var tel=$("input:eq(4)").val();
                   if(tel.length<7||tel.length>11){
                       $("span:eq(4)").show();
                       $("b:eq(4)").hide();
                       flag=false;
                   }else{
                       $("span:eq(4)").hide();
                       $("b:eq(4)").show();
                       flag=true;
                   }
               });
               //身份证
               $("input:eq(5)").click(function(){
                   var ID=$("input:eq(5)").val();
                   if(ID.length<16||ID.length>18){
                       $("span:eq(5)").show();
                       $("b:eq(5)").hide();
                       flag=false;
                   }else{
                       $("span:eq(5)").hide();
                       $("b:eq(5)").show();
                       flag=true;
                   }
               });
               if(flag){
                   //提交按钮
                   $("input:eq(4)").click(function(){

                   });
               }

           });
       </script>
       <style type="text/css">
           span{
               color: red;
           }
       </style>
   </head>
   <body>
       <center>
           <form target="_blank" action="https://www.baidu.com/">
               姓名:<input type="text" id="name"/><span>用户名不能为空</span><b>√</b><br /><br />
               <a>密码:</a><input type="password" id="pwd"/><span>用户名密码不合法</span><b>√</b><br /><br />
               确认密码:<input type="password" id="repwd"/><span>密码不符</span><b>√</b><br /><br />
               Email地址:<input type="text" id="email"/><span>邮箱地址必须包含“@”</span><b>√</b><br /><br />
               手机号:<input type="text" id="tel"/><span>手机号为7-11位数字</span><b>√</b><br /><br />
               身份证号码:<input type="text" id="ID"/><span>身份证号位16-18位数字</span><b>√</b><br /><br />
               <input type="submit" value="提交" />
           </form>
       </center>
   </body>
</html>

阅读全文

0 0