直接上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="form"> <p>用户名:<input type="text" name="userName" /></p> <p>密码:<input type="password" name="userWord"/></p> <p>手机:<input type="tel" name="userPhone"/></p> <p><input type="submit" value="提交"></p> </form> </body> <script> var form = document.getElementById('form'); //定义验证算法类 var autoForm = { isNonEmpt : function(val,msg){ if(val == ''){ return msg; } }, minLength : function (val,length,msg) { if(val.length<length){ return msg; } }, isPhone : function (val,msg) { if(!/(^1[0-9]{10}$)/.test( val )){ return msg; } }
//这里可以封装无数个验证算法
}; var Validator = function(){ this.cache = []; //保存检验规则 }; Validator.prototype.add = function(dom,rule){ var self = this; for(var i=0,rule;rule = rule[i++];){ (function(rule){ var strateguAry = rule.strategy.split(':'),//将带有值的参数分开 errorMsg = rule.errorMsg; self.cache.push(function(){ var strategy = strateguAry.shift();//获取验证算法的名称 strateguAry.unshift(dom.value);//获取将要验证的文本 strateguAry.push(errorMsg); return autoForm[strategy].apply(dom,strateguAry);//借用autoForm的方法进行验证 }) })(rule) } }; Validator.prototype.start = function(){ for(var i=0,fun;fun = this.cache[i++];){ var msg = fun(); if(msg){ return msg; } } } //定义执行算法类,并返回验证结果 var validate = function(){ var validator = new Validator(); validator.add(form.userName,[{ strategy:'isNonEmpt', errorMsg:'用户名不能为空!' },{ strategy:'minLength:2', errorMsg:'用户名最少两个字符!' }]); validator.add(form.userWord,[{ strategy:'isNonEmpt', errorMsg:'密码不能为空!' },{ strategy:'minLength:6', errorMsg:'密码最少6个字符!' } ]); validator.add(form.userPhone,[{ strategy:'isNonEmpt', errorMsg:'手机号码不能为空!' },{ strategy:'minLength:6', errorMsg:'手机号码格式不正确!' } ]); var errorMsg = validator.start(); return errorMsg; }; //表单提交 form.onsubmit = function(){ var errorMsg = validate(); if(errorMsg){ alert(errorMsg); return false; }else{ alert('提交成功!') }; } </script> </html>