许周顺

给自己正能量,让世界为你让路 !

jquery的表单验证

<!DOCTYPE html>
<html>
<head>
<title>jquery的表单验证</title>
 <script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<style>
.error{
color: #f00;
background: #ddd;
border: 2px  solid #55f;
display: none;
}
</style>

</head>
<body>
<form action="1.php" method="get">
<p>用户名:</p>
<p>
<input type="text" name="user" id="user" class="auth">
<span class="error">用户名至少6位!</span>
</p>
<p>密码:</p>
<p>
<input type="text" name="password" id="password" class="auth">
<span class="error">密码至少6位!</span>
</p>


<p>确认密码:</p>
<p>
<input type="text" name="repassword" id="repassword" class="auth">
<span class="error">两次密码不一致!</span>
</p>

<p>邮箱:</p>
<p>
<input type="text" name="email" id="email" class="auth">
<span class="error">邮箱格式错误!</span>
</p>
<p>
<input type="button" value="提交" >
<input type="reset" value="取消">
</p>



</form>
</body>


 <script  type="text/javascript">
 $(function(){
$(\\\'#user\\\').blur(function(){
val = $(this).val();

if(val.length<6){
$(this).next().show();  //next   找到每个段落的后面紧邻的同辈元素
$(this).data({\\\'s\\\':0});  //data([key],[value])  把value的值设置为key  如果成功s、等于0 
}else{
$(this).next().hide();
$(this).data({\\\'s\\\':1});
}
});


$(\\\'#password\\\').blur(function(){
val = $(this).val();
if(val.length<6){
$(this).next().show();
$(this).data({\\\'s\\\':0});
}else{
$(this).next().hide();
$(this).data({\\\'s\\\':1});
}
});


$(\\\'#repassword\\\').blur(function(){
val=$(this).val();
prev=$(\\\'#password\\\').val();


if(val!=prev){
$(this).next().show();
$(this).data({\\\'s\\\':0});
}else{
$(this).next().hide();
$(this).data({\\\'s\\\':1});
}
});


$(\\\'#email\\\').blur(function(){
val=$(this).val();
if(!!val.match(/^\\\\w+@\\\\w+\\\\.\\\\w+$/i)){
$(this).next().hide();
$(this).data({\\\'s\\\':1});
}else{
$(this).next().show();
$(this).data({\\\'s\\\':0});
}
});


$(\\\':button\\\').click(function(){
$(\\\'#user\\\').blur();
$(\\\'#password\\\').blur();
$(\\\'#repassword\\\').blur();
$(\\\'#email\\\').blur();


tot=0;//定义一个从0开始
$(\\\'.auth\\\').each(function(){
tot+=$(this).data(\\\'s\\\');
});


if(tot==4){
$(\\\'form\\\').submit();
}
});
});
</script>


</html>

上一篇:JS中的一些常用的函数

下一篇:一些常用的

文章评论

公告
评论: