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

Jquery-2简单的登录输入框判断

2016-06-07 19:30 246 查看 
<pre name="code" class="html"><span style="font-size:24px;color:#ff0000;">简单的登录输入框判断</span>


<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单的登录输入框判断</title>
<script src="js/jquery-2.2.4.js"></script>
<script>
$(function(){
$("dd .login_content_input").each(function(){
$(this).blur(function(){</span>
//<span style="font-size:18px;color:#ff0000;">取2格属性值，一个属性值是正则表达式，另外一个是错误的提示</span>
<span style="font-size:18px;">var reg=new RegExp($(this).attr("reg"));
var msg=$(this).attr("errMsg");
var reg1=new RegExp($(this).attr("reg1"));
var msg1=$(this).attr("errMsg1");
var inputValue=$(this).val();
$(this).parent("dd").next("dd").remove();
if(reg.test(inputValue)){//验证通过
if($(this).parent("dd").next("dd").length==0) {
//此处引入输入正确时的图片提示

$(this).parent("dd").after("<dd><img src=\"images/register_write_ok.gif\"/></dd>");
}
}else{
$(this).parent("dd").after("<dd>"+msg+"</dd>");
}
});
});

});
</script>
</head>
<body>
<form id="loginForm" name="loginForm"  method="post">
<dl class="login_content">
<dt>Email地址或昵称：</dt>
<dd><input id="email" reg="^\w+@\w+\.((cn)|(com)|(com\.cn))$" errMsg="用户名格式错误，请重新输入" type="text" class="login_content_input"/></dd>
</dl>
<dl class="login_content">
<dt>用户名：</dt>
<dd><input id="name" reg="^[a-zA-Z][a-zA-Z0-9_]{4,15}$"  errMsg="用户名应该为6-15个字符"  type="password" class="login_content_input"/></dd>
</dl>
<dl class="login_content" >
<dt>密码：</dt>
<dd><input id="pwd" reg="^[A-Za-z0-9]{4,15}$"  errMsg="只能由字母数字组成5-16字符"  type="password" class="login_content_input"/></dd>
</dl>
<dl class="login_content" >
<dt>确认密码：</dt>
<dd><input id="pwd1" reg="^[A-Za-z0-9]{4,15}$"  errMsg="只能由字母数字组成5-16字符"  type="password" class="login_content_input"/></dd>
</dl>
<dl class="login_content">
<dt></dt>
<dd><input id="btn" value="注册 " type="submit" class="login_btn_out"/></dd>
</dl>
</form>
</body>
</html></span>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航