您的位置：首页 > Web前端 > JQuery

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

2013-04-01 20:43 531 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Jquery表单的验证用户名和邮箱 append parent blur

相关文章推荐

新的分享

章节导航