说到表单校验，第一个想起来的肯定是jquery的validate.js，该插件的确是很强大，用在项目中也很健壮,但是为什么我选择重新自己封装一个插件呢？
为什么要自己封装表单验证插件：
1、因为项目中用到的是sea.ja,需要对插件进行封装，而楼主不知如何封装validate.js，和其连带的其他插件；
2、因为项目中不是所有的校验都是通过插件校验的，也要自己手动校验一部分，表单提交时不知如何提交;
3、插件功能越多，就意味着越大…
封装的表单验证如何调用？
1、引入jquery.min.js,因为表单中的语法不是原生的，是基于jquery的，因此引入jquery时必备的；
2、引入我们的插件form.js;
3、html中通过标签引用，例如<input type="text" name="phone" flag="false" id="phone" placeholder="请输入您的手机号" check="required isMobile" />，其中id是必须的，check中的内容是你需要校验的项，flag=”false”是是否通过校验的标识，接下来，我将进行详细讲解。
form.js插件代码详解？
(function ($) {
$.fn.extend({
"checkForm": function (options) { var flag = true;//标志每一个输入框中所有检验规则是否执行 var root = this; //当前应用对象存入root var pwd; //密码存储 var defaults = { // 提示信息 tip_success: '<img src="../../xstatic/ximages/zhengque.png" />', //验证成功提示 loginname: { //html中的标签的id值 remote: "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>用户登录名已存在", //验证后的错误提示 required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>用户名不能为空", rangelength:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>用户名长度只能在 6-15位字符之间", stringCheck:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>只能包括英文字母、数字和下划线 ", reg_rangelength:/^[a-zA-Z0-9]{6,15}$/, //对应的正则校验 reg_stringCheck:/^[a-zA-Z][a-zA-Z0-9_]*$/ }, username: { required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>姓名不能为空", rangelength : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>姓名长度只能在2-20位字符之间", isChineseChar : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>姓名必须为汉字", reg_rangelength:/^[\u4e00-\u9fa5]{2,10}$/, reg_isChineseChar:/^[\u4E00-\u9FA5]+$/, }, company: { required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>公司/企业名称不能为空" }, yzm: { remote: "<img src='../../xstatic/ximages/cuowu.png ' style='margin-right: 8px;'>验证码不正确", required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>验证码不能为空" }, phone: { required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>手机号不能为空", isMobile : "<img src='../../xstatic/ximages/cuowu.png ' style='margin-right: 8px;'>手机号码格式有误，请输入正确的手机号", remote : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>手机号已注册，继续注册请与原账号解绑", reg_isMobile:/^13[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|17[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$/ }, inviteid: { remote: "<img src='../../xstatic/ximages/cuowu.png ' style='margin-right: 8px;'>邀请码录入不正确", checkFigure:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>只能含有数字", reg_checkFigure:/^\d+$/ }, confirmPassword: { required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>请再次输入密码", equalTo:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>两次输入密码不一致" }, plainPassword: { required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>请输入密码", rangelength:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>密码长度只能在 6-15位字符之间", stringCheck:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>只能包括英文字母、数字和下划线", reg_rangelength:/^[a-zA-Z0-9]{6,15}$/, reg_stringCheck:/^[a-zA-Z0-9_]*$/ }, place: { rangelength : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>职位长度只能在2-15位字符之间", reg_rangelength:/^[a-zA-Z0-9]{2,15}$/, }, email: { required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>邮箱不能为空", stringCheck:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>请输入正确的邮箱格式", reg_stringCheck:/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/ }, address: { rangelength : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>地址长度只能在4-50位字符之间", reg_rangelength:/^[a-zA-Z0-9]{4,50}$/, }, businmark: { required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>营业执照注册号不能为空" }, myfiles:{ required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>请上传营业执照" } }; if (options) { //如果不为空就合并参数 $.extend(defaults, options) } // 文本框失去焦点时验证 $(":text,:password,textarea", root).each(function () { $(this).blur(function () { var _validate = $(this).attr("check"); if (_validate) { //如果输入框需要校验，则执行check()方法 check($(this), _validate, $(this).val()); } }) }); // 验证方法 var check = function (obj, _match, _val) { //obj为对应的需要校验的输入框 //match为html中check属性的属性值 //val为输入框的值 var id=obj.attr("id");//这里是为了取到对应的元素的校验值defaults[id] var value=$.trim(_val);//防止空格 var arr = _match.split(" ");//校验项字符串转为数组 for(var i=0;i<arr.length;i++){ if(flag==true){ //flag控制是否进行下一项的校验，因此html中check="required isMobile"中的校验项有顺序，需要自己控制 switch (arr[i]) { //arr[i]为校验项 case 'required': flag=value ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].required, false); //校验必须字段，及时的更改flag状态，校验成功返回true，失败返回false,成功之后才会进行下一项的校验，失败，直接提示失败文案 break;//执行到此，case语句不再往下执行 case 'rangelength': if(!value){ //针对非必填项，没有required的校验，所以一定要判断一下value是否为空，空的时候不执行以下的校验项，因为该项可为空 break; }else{ flag=chk(value, defaults[id].reg_rangelength) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].rangelength, false); break; } case 'stringCheck': if(!value){ break; }else{ flag=chk(value, defaults[id].reg_stringCheck) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].stringCheck, false); break; } case 'pw1': //该校验项应为password的最后一项校验 flag="true";//flag标识 pwd = value; //实时储存 var confirmValue=$("#confirmPassword").val(); //确认密码 if(value==confirmValue){ //以下校验是为了防止密码和确认密码一致后，再去改动密码，而确认密码不会提示的问题 $("#confirmPassword").attr("flag","true");//当两者一致时，标记确认密码校验通过 showMsg($("#confirmPassword"), defaults.tip_success, true); }else if(value!=confirmValue&&confirmValue){ $("#confirmPassword").attr("flag","false");//当两者不一致时，标记确认密码校验不通过 showMsg($("#confirmPassword"),defaults.confirmPassword.stringCheck, false); } break; case 'pw2'://该校验项应为confirmPassword的最后一项校验 if(!value){ break; }else{ flag=pwdEqual(value, pwd) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].equalTo, false); break; } case 'isChineseChar': if(!value){ break; }else{ flag=chk(value, defaults[id].reg_isChineseChar) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].isChineseChar, false); break; } case 'isMobile': if(!value){ break; }else{ flag=chk(value, defaults[id].reg_isMobile) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].isMobile, false); break; } case 'checkFigure': if(!value){ break; }else{ flag=chk(value, defaults[id].reg_checkFigure) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].checkFigure, false); break; } defaults: return true; } }else{ //flag==false时，一定校验不通过， obj.attr("flag",false); } if(i==arr.length-1){ //当校验到最后一项时，需要将flag表示置为true,否则其他校验无法进入 //以下是需要调用接口才可验证的项，按照自己需求可就行改造 if(flag==true&&id=="phone"){ //校验手机号是否已注册 $.ajax({ type: "post", async: false, url: "http://www.baidu.com/register/checkPhone", data: {phone: value}, dataType: "text", success: function (data) { if(data=="false"){ showMsg(obj, defaults[id].remote, false); flag=false; $(".send-yzm").css("color","rgba(0,0,0,.3)"); }else{ //手机号校验成功 $(".send-yzm").css("color","#313131"); } } }); } if(flag==true&&id=="yzm"){ //校验验证码是否正确 var phone=$("#phone").val(); $.ajax({ type: "post", async: false, url: "http://www.baidu.com/register/checkRandom", data: {yzm: value,phone:phone}, dataType: "text", success: function (data) { if(data=="false"){ showMsg(obj, defaults[id].remote, false); flag=false; } } }); } if(flag==true&&id=="loginname"){ //校验验证码是否正确 if(value){ $.ajax({ type: "post", async: false, url: "http://www.baidu.com/register/checkLoginName", data: {loginname: value}, dataType: "text", success: function (data) { if(data=="false"){ showMsg(obj, defaults[id].remote, false); flag=false; } } }); }else{ $(obj).next(".errormsg").remove(); } } if(flag==true&&id=="inviteid"){ //校验验证码是否正确 if(value){ $.ajax({ type: "post", async: false, url: "http://www.baidu.com/register/checkInvite", data: {inviteid: value}, dataType: "text", success: function (data) { if(data=="false"){ showMsg(obj, defaults[id].remote, false); flag=false; } } }); }else{ $(obj).next(".errormsg").remove(); } } obj.attr("flag",flag);//当前校验项是否通过由flag进行控制 flag=true;//全局flag复位 } } }; //判断两次密码是否一致 var pwdEqual = function (val1, val2) { return val1 == val2 ? true : false; }; //正则验证 var chk = function (str, reg) { return reg.test(str); }; //显示信息 var showMsg = function (obj, msg, mark) {//文字显示的位置在此处控制 var id=obj.attr("id"); if(id=="phone"&&mark==false){ $(".send-yzm").css("color","rgba(0,0,0,.3)"); } $(obj).next(".errormsg").remove(); var _html = "<span class='errormsg' style='font-size:14px;color:#ff3c00;margin-left:10px; '>" + msg + "</span>"; if(id=="yzm"){ $(obj).next().next(".errormsg").remove(); $(obj).next().after(_html); }else{ $(obj).after(_html); } return mark; } } }) })(jQuery); 总结：代码注释的很是详细，相信大家看完之后就会明白其原理，简单明了，可操作性强。但是仍然有几个地方需要提醒大家注意：
<form action="http://baidu.com" method="post" flag="true">form表单需要指定flag标记，true表示表单可提交，false表示表单不可提，这是为了方便大家重写submit方法，可在方法中添加自己需要控制的东西，要是有插件不能校验的校验项，可通过判断form的flag是否为true，true的话再去判断，false的话直接提示插件校验结果。<form action="http://baidu.com" method="post" flag="true">默认的flag应为true，因为submit方法没有写在插件中，所以点击提交的时候需要我们去校验是否为空，因为插件中的事件都是在失去焦点时触发的，因此一旦输入框触发了失去焦点事件，插件一定做了校验，所以没有做检验的一定为空，提交方法如下：
function _onSubmit() {
$(":text,:password", $(".content-warp")).each(function () {
var flag=$(this).attr("flag");
//判断每个输入框的是否通过校验
var id=$(this).attr("id");
var value=$.trim($(this).val());
if(flag=="false"){ //如果没有进行填选
//一旦有一个未flase,form表单不可提交
$(".form1").attr("flag","false"); if(id!="loginname"&&id!="inviteid"&&id!="registerYZM"){
//这个为过滤掉不必填项
if(!value){
$(this).next(".errormsg").remove();
var _html = "<span class='errormsg' style='font-size:14px;color:#ff3c00;margin-left:10px; '>" + defaults[id].required + "</span>";
if(id=="yzm"){ $(this).next().next(".errormsg").remove();
$(this).next().after(_html);
}else{
$(this).after(_html);
}
}
}
}
});
}.
3. <input type="text" name="phone" flag="false" id="phone" placeholder="请输入您的手机号" check="required isMobile" />每一个校验项默认的flag应该为false，等校验成功后将该项flag置为true，
4. 最后提醒一句，一旦涉及到表单提交，最好写一个防止重复提交的方法，因为这是一个好的习惯。