jQuery表单验证
按照课本做的验证demo;
1.html部分：
<body>
<form method="get" action="###">
<div>
<label for="name">用户名：</label>
<input type="text" id="name"required>
</div><br />
<div>
<label for="pass">密 码 ：</pass>
<input type="password" id="pass"required>
</div><br/>
<input type="submit">
</form>
</body>
2.css部分：
<style>
.error{
border:1px solid red;
}
.success{
border:1px solid green;
}
</style>
3.js(jQuery)部分：
<script>
$(function(){
$(':input').blur(function(){ //为表单元素添加时区焦点事件
var errorMsg={//错误提示信息
nameError:'请输入至少6位的用户名',
passError:'请输入至少6位的密码'
};
var okMsg={//正确提示信息
nameOk:'用户名格式正确',
passOk:'密码格式正确'
}
var $parent=$(this).parent();//获取父元素，添加提示会用到
if($(this).is('#name')){ //判断当前焦点input类型,$(':input')
if(this.value.length<6){//当前input内容的判断规则
$parent.find('.msg').remove();//移除之前添加的提示信息
$parent.append('<span class="msg error">'+errorMsg.nameError+'</span>');//添加提示信息
}else{
$parent.find('.msg').remove();
$parent.append('<span class="msg success">'+okMsg.nameOk+'</span>');} //添加提示信息
}
if($(this).is('#pass')){//当前input为#pass时
if(this.value.length<6){
$parent.find('.msg').remove();
$parent.append('<span class="msg error">'+errorMsg.passError+'</span>');
}else{
$parent.find('.msg').remove();
$parent.append('<span class="msg success">'+okMsg.passOk+'</span>');
}
}
}).keyup(function(){$(this).triggerHandler('blur')})//添加keyup()事件，用户松开按键时触发提醒
.focus(function(){$(this).triggerHandler('blur')})//添加focus()事件，元素得到焦点时触发
$('input:submit').click(function(){//为表单的提交按钮设置规则
$('form input:required').trigger('blur');//自动执行required的blur焦点事件
var myError = $('form .error').length;//获取blur事件添加的class="error"的错误元素个数
if(myError){//错误数只要不是0，都会返回false，阻止提交功能
return false;
}
alert('注册成功')//错误数为0时，提交功能可用
})
//alert($('form input:required').length)
})
</script>
