Jquery的小案例4、实现表单的验证(用户名和邮箱)

最新推荐文章于 2021-10-20 22:11:23 发布

温建江

最新推荐文章于 2021-10-20 22:11:23 发布

阅读量1.2k

点赞数 1

分类专栏： Jquery 文章标签： Jquery表单的验证用户名和邮箱 append parent blur

本文链接：https://blog.csdn.net/feilong_1212/article/details/8748409

版权

Jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<html>
<head>
   <meta charset="utf-8"/>
   <script src="jquery-1.4.2.min.js"></script> //在此处的Jquery文件封装的js文件下载地址：http://download.csdn.net/detail/feilong_12/5210621
   <script>
     $(function(){
           $(":input").each(function(){
                   var $ss=$("<strong>*</strong>");
                   $(this).parent().append($ss);
           });
           $(":input.name").blur(function(){
               if($(this).is(".name")){
               $(".formtip").remove();
                   if(this.value==""||this.value.length<6){
                           var eg="<span class='formtip'>用户名至少是6个字母</span>";
                           $(this).parent().append(eg);
                   }else{

                           var masg="<span class='formtip'>用户名可以使用</span>";
                           $(this).parent().append(masg);
                   }


               }
               })

                   $(":input.mail").blur(function(){
                           if($(this).is(".mail")){
                           $(".emailtip").remove();
                           var reg=/\w{1,}@\w+\.\w+/;
                           var $dd=$(".mail").val();
                           if(!reg.test($dd)){
                               var errMsg="<span class='emailtip'>邮箱不合法</span>";
                               $(this).parent().append(errMsg);
                           }else{
                           var eee="<span class='emailtip'>您输入的邮箱符合规则</span>";
                           $(this).parent().append(eee);
                           }
                           }
                   });

           })
   </script>
</head>
<body>
       <div >用户名：<input type="text" class="name"/></div><br/>
       <div >密码：<input type="password" class="pass"/></div>
       </br>
       <div >邮箱：<input type="text" class="mail"/></div>
       <br/>
       <input type="button" value="注册"/>
</body>
</html>