表单验证

来源：互联网发布：程序员级别划分编辑：程序博客网时间：2024/05/17 08:45

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>周考练习</title>
<script src="jquery-2.1.0.js"></script>
<style>
    .right{
       color:red;
       }
     .error{
       color:green;
       }
</style>
     <script>
       $(function(){
           //用户名
           $("input:eq(0)").blur(function(){
               var name=$(this).val();
               if(name=="")
               {
                   $("span:eq(0)").removeClass("right error");
                   $("span:eq(0)").html("用户名为空").addClass("right").show();
                   return false;
               }
               else
               {
                   $("span:eq(0)").html("√").addClass("error").show();
               }
               });
               //第一次密码
               $("input:eq(1)").blur(function(){
               var a=$("#m1").val();
               if(a.length<6||a.length>12)
               {
                   $("span:eq(1)").removeClass("right error");
                   $("span:eq(1)").html("密码格式不对").addClass("right").show();
                   return false;
               }
               else
               {
                   $("span:eq(1)").html("√").addClass("error").show();
               }
               });
               //第二次密码
               $("input:eq(2)").blur(function(){
               var a=$("#m1").val();
               var b=$("#m2").val();
               if(b.length<6||b.length>12)
               {
                   $("span:eq(2)").removeClass("right error");
                   $("span:eq(2)").html("密码格式不对路").addClass("right").show();
                   return false;
               }
               else
               {
                   $("span:eq(2)").html("√").addClass("error").show();
               }

               if(a!=b)
               {
                   $("span:eq(2)").removeClass("right error");
                   $("span:eq(2)").html("密码不相同").addClass("right").show();
                   return false;
               }
               else
               {
                   $("span:eq(2)").html("√").addClass("error").show();
               }
               });
               //邮箱
               $("input:eq(3)").blur(function(){
              var name=$(this).val();
              if(name.search("@")==-1)
              {
                  $("span:eq(3)").removeClass("right error");
                  $("span:eq(3)").html("邮箱格式有误").addClass("right").show();
                  return false;
              }
              else
              {
                  $("span:eq(3)").html("√").addClass("error").show();
               }
              });
              //手机号
              $("input:eq(4)").blur(function(){
               var name=$(this).val();
               var reg=/\D/;
               if(name.length<7||name.length>11||reg.test(name))
               {
                   $("span:eq(4)").removeClass("right error");
                   $("span:eq(4)").html("手机号格式不对").addClass("right").show();
                   return false;
               }
               else
               {
                   $("span:eq(4)").html("√").addClass("error").show();
               }
               });
               //身份证
               $("input:eq(5)").blur(function(){
               var name=$(this).val();
               if(name.length!=16||name.length!=18)
               {
                   $("span:eq(5)").removeClass("right error");
                   $("span:eq(5)").html("身份证格式有误").addClass("right").show();
                   return false;
               }
               else
               {
                   $("span:eq(5)").html("√").addClass("error").show();
               }
               });

           });

     </script>
</head>

<body>
    <center>
      用户名:<input type="text"><span></span><br><br>
      密码:<input type="password" id="m1"><span></span><br><br>
      再次输入密码:<input type="password" id="m2"><span></span><br><br>
      邮箱:<input type="text"><span></span><br><br>
      手机号:<input type="text"><span></span><br><br>
      身份证:<input type="text"><span></span><br><br>
    </center>
</body>
</html>

阅读全文

0 0