用户名密码判断验证

来源：互联网发布：最简单的c语言代码编辑：程序博客网时间：2024/05/16 05:41

我们都知道有的时候我们在登录或者注册一个账户的时候,有的会提示我们用户名格式不正确,或者密码不能为空或者低于多少位

高于多少位,不能包含汉字什么的一些条件,在这里我们是可以对输入的信息进行判断的,我们也可以自己通过JQuery自己来进行

一些条件的判断,自己就能可以做一个登录或者注册的东西.

<!doctype html>

<title>用户名密码判断</title>

//首先我们要导入jQuery的工具包

<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