0413--jQuery第五次作业---正则表单

最新推荐文章于 2022-09-24 21:33:10 发布

酷扬

最新推荐文章于 2022-09-24 21:33:10 发布

阅读量317

点赞数

分类专栏： html html css css jquery html javascript 文章标签： html javascript jquery 正则表单

本文链接：https://blog.csdn.net/aa8869138/article/details/70158017

版权

html 同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

css

26 篇文章 0 订阅

订阅专栏

html css

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <style type="text/css" >
        * {
            padding: 0;
            margin: 0;
        }

        body {
           background-color: #ccc;
        }

        .wrapper {
            margin: 100px auto;
            width: 500px;
            padding: 50px;
            line-height: 40px;
            border: 1px solid #999;
            background: #efefef;
        }

        .wrapper span{
            padding-left: 20px;
            color: #ccc;
        }

        .wrapper .codeStrlen {
            background: url(images/strong.jpg) ;
            width: 220px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <label> Q   Q   <input type="text" name="" id="qq" value=""></label><span>输入正确的QQ号码</span><br/>
        <label>手机   <input type="text" name="" value=""></label><span>输入13位手机号码</span><br/>
        <label>邮箱   <input type="text" name="" value=""></label><span>输入正确邮箱</span><br/>
        <label>座机   <input type="text" name="" value=""></label><span>输入您的座机</span><br/>
        <label>账号   <input type="text" name="" value=""></label><span>亲输入您的账号,6个以上,前英后数,</span><br/>
        <label>密码   <input type="password" name="" value=""></label><span>请输入您的密码</span>
        <div class="codeStrlen">

        </div>
    </div>
    <script type="text/javascript">
         $(function(){

                 function fun(id,fun){
                    $(id).blur(fun);
                                     }
                fun("input:eq(0)",function(){
                   var num = /^[1-9]\d{4,10}$/;
                   if(num.test($("#qq").val())){
                          $("span:eq(0)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
                   } else{
                        $("span:eq(0)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
                   }
                });
                 fun("input:eq(1)",function(){
                   var num = /^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/;
                   if(num.test($("input:eq(1)").val())){
                          $("span:eq(1)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
                   } else{
                        $("span:eq(1)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
                   }
                });
                  fun("input:eq(2)",function(){
                   var num = /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                   if(num.test($("input:eq(2)").val())){
                          $("span:eq(2)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
                   } else{
                        $("span:eq(2)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
                   }
                });
                   fun("input:eq(3)",function(){
                   var num = /^0\d{2,3}-\d{7,8}$/;
                   if(num.test($("input:eq(3)").val())){
                          $("span:eq(3)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
                   } else{
                        $("span:eq(3)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
                   }
                });
                     fun("input:eq(4)",function(){
                   var num = /[a-zA-Z]{1,}[0-9]{1,}/; ;
                   if(num.test($("input:eq(4)").val()) && $("input:eq(4)").val().length>6){
                          $("span:eq(4)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
                   } else{
                        $("span:eq(4)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
                   }
                });

                     var level =0;
                   var arr=["url(images/strong.jpg) no-repeat 0px 0px","url(images/strong.jpg) no-repeat 0px -20px","url(images/strong.jpg) no-repeat 0px -40px","url(images/strong.jpg) no-repeat 0px -60px"];
                      $("input:eq(5)").keyup(function(){
                            level=0;
                            var txt=/[0-9]/.test($("input:eq(5)").val());
                            if(txt){
                                level++;
                            }
                            if(/[a-zA-Z]/.test($("input:eq(5)").val())){
                                level++;
                            }
                             if(/\W/.test($("input:eq(5)").val())){
                                level++;
                            }



                          $("span:eq(5)").html("666").css({"color":"green","background":"url(images/right.png) no-repeat"});
                  if($("input:eq(5)").val().length<6){
                                level=0;
                                 $("span:eq(5)").html("见鬼去吧").css({"color":"red","background":"url(images/error.png) no-repeat"});
                            }
                              $("div:eq(1)").css("background",arr[level]);
                      });

         });
    </script>
</body>
</html>

酷扬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0413--jQuery第五次作业---正则表单

Document * { padding: 0; margin: 0; } body { background-color: #ccc; } .wrapper { margin
复制链接

扫一扫