表单验证是经常用到的一种本地验证方式，其作用是在数据提交到服务器之前，进行一次本地验证，很大程度上，减少了服务器关于验证的压力，也起到了避免脏数据录入服务器的作用。
其原理是，利用焦点事件，触发检查方法，且提示相对于的提示。
下面是菜鸟利用jQuery的表单验证方法因为其样式没有特别的地方，这里讲不再写CSS样式。在文章的最后，免费的源代码资源供和我一样的菜鸟交流学习。
免积分源代码下载地址在文章最后！
html
<div class="index04Container">
<div class="index04FormeContainer">
<div class="index04FormeTitle">
<img src="images/index04/index04_16.png">
用户登录
</div>
<form action="#" method="post">
<div class="index04InputCont">
<input type="text" value="用户名/邮箱/手机号码" id="index04Name" war="请输入有效的账号信息">
<div class="Warming"></div>
</div>
<div class="index04InputCont">
<input type="text" value="填写密码" id="index04Psd">
<input type="password" value="" id="index04Password" style="display:none;">
<div class="Warming"></div>
</div>
<div class="index04Checkboxes">
<div class="left"><input type="checkbox" id="index04Yes"> 记住账号</div>
<div class="right"><a href="#">忘记密码?</a></div>
</div>
<div class="index04ButCont">
<input type="submit" value="登录" id="index04Submit">
</div>
</form>
<div class="index04FormeBottom">
使用合作网站账号登录LU-PR：
<img src="images/index04/index04_26.png"><a href="#">新浪微博</a>
<img src="images/index04/index04_28.png"><a href="#">QQ登陆</a>
</div>
</div>
</div>$(function(){
var commonality={
//检查输入的值是否和初始值相同,第一个参数为对象，低二个参数为默认值
checkName:function(id){
var obj=$(id);
var val=obj.val();
var warming;
var t=/^[a-zA-Z0-9][\w_@.$%^&#]{5,15}$/;//字母和数字开头，zhong
if(val==""){
warming="用户名不能为空";
commonality.Warming(obj,false,warming);
return false;
}else
if(t.test(val)==false){
warming="用户名需要字母开头，长度不能小于6";
commonality.Warming(obj,false,warming);
return false;
}
else{
warming="前台验证正确";
commonality.Warming(obj,true,warming);
return true;
}
},
//检查密码
checkPassword:function(id){
var obj=$(id);
var val=obj.val();
var warming;
if(val==""){
warming="密码不能为空";
commonality.Warming(obj,false,warming);
return false;
}else
if(val.length<6){
warming="密码，长度不能小于6";
commonality.Warming(obj,false,warming);
return false;
}
else{
warming="密码，前台验证正确";
commonality.Warming(obj,true,warming);
return true;
}
},
checkBox:function(id){
if ($(id).is(':checked')) {
return true;
}else{
alert("请勾选已经阅读注册协议");
return false;
}
},
//报警提示方法，对象，布尔值，提示语
Warming:function(obj,TF,content){
var a=obj.siblings(".Warming");
var img='<img src="images/index04/index04_';
if(TF){
var warYes=img+'20.png">'+content;
a.html(warYes);
}else{
var warNo=img+'23.png">'+content;
a.html(warNo);
}
},
//方法适配器，获取ID
OnFocus:function(id){
$(id).focus(function (){
if ($(this).val()==this.defaultValue) {
$(this).val("");}
});
},
//方法适配器，接受id，和要执行的方法名称
OnBlur:function(id,FunName){
$(id).blur(function(){
commonality[FunName](id);
if ($(this).val()=="") {
$(this).val(this.defaultValue);
}
});
},
}//公共的方法池结束
//用户名验证
commonality.OnFocus("#index04Name");
commonality.OnBlur("#index04Name","checkName");//传递了ID，和方法名称
//假的，密码框获取焦点
$("#index04Psd").focus(function(){
$(this).hide();
$("#index04Password").show().focus().addClass("onInput");;
});
//密码框获得焦点
$("#index04Password").focus(function(){
$(this).addClass("onInput");
});
//密码框失去焦点
$("#index04Password").blur(function(){
var id=$(this).attr("id");
$(this).removeClass("onInput");
if ($(this).val()=="") {
$(this).removeClass("onInput").hide();
$("#index04Psd").show();
commonality.checkPassword('#'+id);
}else{
commonality.checkPassword('#'+id);
}
});
$("#index04Submit").click(function(){
if(
commonality.checkName("#index04Name") &&
commonality.checkPassword("#index04Password") &&
commonality.checkBox("#index04Yes")
){
return true;
}else{
return false;
}
});
/*主方法结束*/
});