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

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

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/2086556.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-07-22
下一篇 2022-07-22

发表评论

登录后才能评论

评论列表(0条)

保存