利用jQuery实现表单验证功能-03251108-51CTO博客
source link: http://blog.51cto.com/11871779/2069755
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
利用jQuery实现表单验证功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: 微软雅黑;
}
form span{
color: #f00;
font-weight: bold;
display: none;
}
</style>
<script src="jquery-1.8.3.js"></script>
</head>
<body>
<form>
<p>用户名：</p>
<p>
<input type="text" name="userName" class="auth">
<span>用户名不能为空</span>
</p>
<p>密码：</p>
<p>
<input type="text" name="pwd" class="auth">
<span>长度必须为6位</span>
</p>
<p>确认密码：</p>
<p>
<input type="text" name="rePwd" class="auth">
<span>两次密码必须为一致</span>
</p>
<p>
<button>提交</button>
</p>
</form>
</body>
<script type="text/javascript">
// 用户名验证
$('input[name=userName]').blur(function(){
val=$(this).val(); // 获取用户名
if(val.length==0){
//a=0;
$(this).data({'num':0}); // 绑定属性
$(this).next().show(); // 显示提示消息
}else{
//a=1;
$(this).data({'num':1});
$(this).next().hide(); // 隐藏掉提示信息
}
});
// 密码验证
$('input[name=pwd]').blur(function(){
val=this.value; // 获取密码if(val.length<6){ //b=0; $(this).data({'num':0}); // 绑定属性 $(this).next().show(); // 显示提示信息}else{ //b=1; $(this).data({'num':1}); // 绑定属性 $(this).next().hide(); // 隐藏掉提示信息}});
// 确认密码验证
$('input[name=rePwd]').blur(function(){
pwd=$('input[name=pwd]').val(); // 获取密码
repwd=$(this).val(); // 获取确认密码
if(pwd!=repwd){
//c=0;
$(this).data({'num':0}); // 绑定属性
$(this).next().show(); // 显示提示消息
}else{
//c=1;
$(this).data({'num':1}); // 绑定属性
$(this).next().hide(); // 隐藏掉提示信息
}
});
// 表单提交
$('form').submit(function(){
// 让3个文本框失去焦点
$('input.auth').blur(); // 失去焦点的方法
// r=a+b+c;
// if(r==3){
// return true; // 提交表单
// }else{
// return false; // 阻止表单提交
// }
//
// 第二种方式
r=0;
$('input.auth').each(function(){
r+=$(this).data('num'); // 收集数据
});
if(r==3)
return true; // 提交表单
else
return false; // 不提交表单
});
</script>
</html>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK