基于Jquery实现表单验证
有时在我们注册账户、登陆系统时，当所有验证通过方可提交这就需要Jquery来实现表单验证，今天分享给小伙伴们一段基于Jquery实现表单验证的代码。
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8">
<title>Reg</title>
<style>
.state1{
color:#aaa;
}
.state2{
color:#000;
}
.state3{
color:red;
}
.state4{
color:green;
}
</style>
<scriptsrc="jquery.js"></script>
<script>
$(function(){
varok1=false;
varok2=false;
varok3=false;
varok4=false;
//验证用户名
$('input[name="username"]').focus(function(){
$(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state2');
}).blur(function(){
if($(this).val().length>=3&&$(this).val().length<=12&&$(this).val()!=''){
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok1=true;
}else{
$(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state3');
}
});
//验证密码
$('input[name="password"]').focus(function(){
$(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state2');
}).blur(function(){
if($(this).val().length>=6&&$(this).val().length<=20&&$(this).val()!=''){
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok2=true;
}else{
$(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state3');
}
});
//验证确认密码
$('input[name="repass"]').focus(function(){
$(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state2');
}).blur(function(){
if($(this).val().length>=6&&$(this).val().length<=20&&$(this).val()!=''&&$(this).val()==$('input[name="password"]').val()){
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok3=true;
}else{
$(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');
}
});
//验证邮箱
$('input[name="email"]').focus(function(){
$(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2');
}).blur(function(){
if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
$(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');
}else{
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok4=true;
}
});
//提交按钮,所有验证通过方可提交
$('.submit').click(function(){
if(ok1&&ok2&&ok3&&ok4){
$('form').submit();
}else{
returnfalse;
}
});
});
</script>
</head>
<body>
<formaction='do.php'method='post'>
用户名:<inputtype="text"name="username">
<spanclass='state1'>请输入用户名</span><br/><br/>
密码:<inputtype="password"name="password">
<spanclass='state1'>请输入密码</span><br/><br/>
确认密码:<inputtype="password"name="repass">
<spanclass='state1'>请输入确认密码</span><br/><br/>
邮箱:<inputtype="text"name="email">
<spanclass='state1'>请输入邮箱</span><br/><br/>
<ahref="javascript:;"><imgclass='submit'type='image'src='./images/reg.gif'/></a>
</form>
</body>
</html>
以上就是本文的全部内容，希望大家可以喜欢。