new Form($(".sign-up")[0], { errorMsgClass: "error", //错误提示框的类名，用于自定义样式 errorInputClass: "invalid", //input无效的类名，用于自定义样式 }, submit); function submit(){ console.log("表单验证成功，准备提交"); //提交操作 }
执行new From的时候传了3个参数，第一个是form的DOM元素，第二个参数是验证规则的一些配置，第三是验证成功的回调函数。对应如下：
var Form = function(form, checkOpt, submitCallback){ //... }
第二个参数checkOpt有两个属性errorMsgClass和errorInputClass用来自定义样式。
最简单的初始化，能够实现required属性、pattern属性和类型检验生效。pattern使用正则表达式，其错误提示信息放在pm属性里，如上面的 pm="密码要在6到20位之间" 。
2. 添加自定义检验
上面的密码需要保证两次的输入一致，在checkOpt里面添加自定义验证：
checkOpt.rule = { "confirm-pwd": { check: checkPwdIdentity, //自定义检验函数 msg: "两次密码输入不一致" //出错提示信息 } } function checkPwdIdentity(){ if(this.form["password"].value !== this.form["confirm-pwd"].value){ return false; } return true; }
如上所示，添加了一个rule属性，key值为input的name属性，value值包含一个自定义的检验函数和出错信息
3. 自定义异步检验
有些数据需要向服务请求检验，如检验账户是否存在
checkOpt.rule.account = { check: checkAccountExist, msg: "账户已存在!", async: true //标志位，说明是异步的检验 }; function checkAccountExist(failCallback, successCallback){ var input = this; util.ajax("/register/hasUser", {account: this.value}, function(data){ //如果用户存在则调用failCallback，让插件添加一个错误提示 if(data.isUser === true){ failCallback(); } //成功则调用成功的回调函数 else{ successCallback(); } }); }
在回调函数里面传进两个参数，如果检验失败则执行第一个参数，成功则执行第二个参数，为插件所用。
4. 添加自定义类型出错提示
Form已经提供了一套默认类型出错提示：
Form.prototype.validationMessage_cn = { email: '无效的邮箱格式', number: '无效的数字格式', url: '无效的网址格式', password: '格式无效', text: '格式无效' };
你也可以自定义一个，将上面的文案换掉即可，暂时没有提供参数
另外可以取消掉浏览器提供的文案，用上面的默认文案
//如果浏览器的语言不是中文的话，就不要使用英文的文案了，双语站时候适用 checkOpt.disableBrowserMsg = !(navigator.language || navigator.userLanguage).match(/cn/i)
还可以指定Form使用的语言：
//双语站切换时适用 checkOpt.lang = "cn"; //或者en
三、插件源码解析
插件的代码并不是很复杂，只是需要考虑很多细节。
1. 为非html5浏览器添加checkValidity函数
如果没有checkValidity函数的话就给它添加一个，核心代码见Github，这里不进行详细说明。
var input = document.createElement("input"); if(!input.checkValidity){ HTMLInputElement.prototype.checkValidity = function(){ //详细代码见github } }
2. 添加错误提示
重点是计算提示显示的位置，
Form.prototype.addErrorMsg = function(input, msg){ }
3. 异步检验的实现
异步检验难点在于，什么时候执行submit回调。解决方案是给每个input添加一个hasCheck属性，如果检查通过则设置为true，一旦focus了就设为false，blur则触发检查。只有所有的input都有了hasCheck为true时才能执行submit回调。下面的checkAsync的第二个参数，点提交时设置成true，而blur验证则为false
Form.prototype.checkAsync = function(input, doesSubmit){ name = input.name; var rule = input.form.Form.checkOpt.rule; rule[name]["check"].call(input, //检验失败回调函数 function(){ var Form = input.form.Form; Form.addErrorMsg(input, Form.checkOpt.rule[name].msg); }, //检验成功回调函数 function(){ input.hasCheck = true; if(doesSubmit){ input.form.Form.tryCallSubmit(input); } }); };
代码的第14行检查除submit外所有的input是否为hasCheck为true，如果有则执行submit callback。
现在这个Form插件只支持text/password/url/email/number这几种input，应该可以满足大部份的表单提交，如果需要，可再继续完善。
参考：