网络人 > javascript技术 > 使用jQuery快速验证表单,使用data收集

使用jQuery快速验证表单,使用data收集

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
span {display: none;}
</style>
</head>
<body>
<form action="" method="post">
<p>用户名:</p>
<p><input name="username" type="text" class="auth"/> <span>用户名长度要大于6个字符,小于15个字符</span></p>
<p>密码:</p>
<p><input name="password" type="password" class="auth"/><span>密码长度要大于6个字符</span></p>
<p>重复密码:</p>
<p><input name="repassword" type="password" class="auth"/><span>2次输入密码不一致</span></p>
<p>邮箱:</p>
<p><input name="email" type="text" class="auth"/><span>请输入正确的邮箱地址</span></p>
<input name="" type="submit" value="提交" />
</form>
<script>
//使用的属性选择器,只要字段名不改变,都能选择成功。提示错误使用了next。当失去焦点触发程序判断。使用data传值最后累加结果达到所有项验证通过。
$('input[name=username]').blur(function(){
	var v=this.value;
	if(v.length<6 || v.length>15){
		$(this).data({'auth':0});
		$(this).next().show();
	}else{
		$(this).data({'auth':1});
		$(this).next().hide();
	}
});
//密码验证
$('input[name=password]').blur(function(){
	var v=this.value;
	if(v.length<6 || v.length>15){
		$(this).data({'auth':0});
		$(this).next().show();
	}else{
		$(this).data({'auth':1});
		$(this).next().hide();
	}
});
//重复密码验证
$('input[name=repassword]').blur(function(){
	var v=this.value;
	var v2=$('input[name="password"]').val();
	if(v!=v2){
		$(this).data({'auth':0});
		$(this).next().show();
	}else{
		$(this).data({'auth':1});
		$(this).next().hide();
	}
});
//邮箱验证
$('input[name=email]').blur(function(){
	var v=this.value;
	if(!v.match(/^w+@w+.w+$/i)){
		$(this).data({'auth':0});
		$(this).next().show();
	}else{
		$(this).data({'auth':1});
		$(this).next().hide();
	}
});

//当提交表单的时候让所有失去焦点,对data的值 相加后得到固定值如果为对的就提交,否则返回错误。
$('form').submit(function(){
	$('.auth').blur();//失去焦点
	alldate=0;
	$('.auth').each(function(){
		alldate+=$(this).data('auth');//收集data值	
	});
	alert(alldate);
	if(alldate==4){
		return true;	
	}
	return false;
});
</script>
</body>
</html>

除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/javascript/21.html

下一篇 »:用jQuery实现拖拽移动效果«上一篇:导致php出现空白行的解决办法

《使用jQuery快速验证表单,使用data收集》相关文章推荐阅读

《使用jQuery快速验证表单,使用data收集》的网友评论(0)

感谢打赏!