使用jQuery快速验证表单，使用data收集_javascript技术

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

Kwok 发表于：2017-11-18 19:18:09 点击：86 评论： 0

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

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/21

标签：jQuery data

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

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

最新文章

本站推荐阅读

热门点击文章

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

相关文章

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

最新文章

本站推荐阅读

热门点击文章