;(function(){ /** 验证框架 checkFun * 使用方法: * <input class="required" type="text" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确" id="" /> * 1、需要验证的元素都加上【required】样式，当然这个required可以当参数传递，也可以自定义class类名 * 2、@data-valid 验证规则，验证多个规则中间用【||】隔开，更多验证规则，看rules和rule，后面遇到可继续增加 * 3、@data-error 规则对应的提示信息，一一对应 * 调用方式 checkFun({ formId:'verifyCheck',//<验证formId内class为required的元素 checkClass:'required',//<需要验证的DOM元素上默认class类名> onBlur:function(el,state){console.log(state)},//<被验证元素失去焦点的回调函数,回调函数中包括当前输入框失焦后是否通过验证的状态true表示通过，false表示未通过> onFocus:null,//<被验证元素获得焦点的回调函数> onChange: null,//<被验证元值改变的回调函数> successTip: true,//<验证通过是否提示> resultTips:null,//<显示提示的方法，参数obj[当前元素],isRight[是否正确提示],value[提示信息]> clearTips:null //<清除提示的方法，参数obj[当前元素]> }) 下面列举下实现的调用 //1.实现isNonEmpty，邮箱格式isEmail <input class="required" type="text" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确" id="" /> //2.验证最小长度minLength与最大长度maxLength <input type="password" placeholder="密码" value="" class="required password" id="password" data-valid="isNonEmpty||minLength:3" data-error="密码不能为空||密码长度至少为3位"/> //3验证某个范围内between <input type="password" placeholder="密码" value="" class="required password" id="password" data-valid="isNonEmpty||between:3-5" data-error="密码不能为空||密码长度在3-5位"/> //4.验证两次密码是否输入一致isRepeat <div class="same"> <input type="password" placeholder="密码" value="" class="required password" id="password" data-valid="isNonEmpty||between:3-5" data-error="密码不能为空||密码长度在3-5位"/> <label class="focus valid"></label> </div> <div class="same"> <input type="password" placeholder="重复密码" value="" class="required password2" id="password2" data-valid="isNonEmpty||isRepeat:password" data-error="密码不能为空||两次输入的密码不一致"/> <label class="focus valid"></label> </div> //5.验证密码强度level （使用方式跟minLength一样 level:3） //6.验证是否为手机号码isPhone //7.验证是否为纯中文isZh //8.验证身份证号码isCard //下面的方式原生调用方式，当然可以使用jquery触发点击事件 document.getElementById('submitBtn').addEventListener('click',function(){ //点击提交按钮时验证 if(!checkFun.click()) return; },false) */ * 深度拷贝 * @param p 拷贝的对象 * @param c c默认传递的对象，也可以不传 * @result 返回拷贝后的对象 * var extendCopy = ( f(p,c){ var c = c || {}; for (var i in p) { if(typeof p[i] === 'object'){ c[i] = (p[i] instanceof Array) ? [] : {}; f(p[i],c[i]); }else{ c[i] = p[i]; } } return c; }); var opts; var checkFun = (config){ opts = extendCopy(config || {},ValCheck.defaults); return (new ValCheck())._init(opts); } ValCheck(){ //验证规则 var rule = { phone:/^1\d{10}$/,email:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/身份证号 zh:/^[\u4e00-\u9fa5]+$/纯中文 }; this.rules = { isNonEmpty: function(value,errorMsg) {不能为空 errorMsg = errorMsg||" "; if (!value.length) errorMsg; },minLength: 大于 errorMsg=errorMsg||" "; if (value.length < length) errorMsg; },maxLength: 小于 errorMsg=errorMsg||" "; if (value.length > length) errorMsg; },between: 大于小于 errorMsg=errorMsg||" "; var min = parseInt(range.split('-')[0]); var max = parseInt(range.split('-')[1]); if (value.length < min || value.length > max) 重复密码 errorMsg=errorMsg||" "; var curPswDomVal = document.getElementById(range).value; if(value!==curPswDomVal) (value,errorMsg) { errorMsg=errorMsg||" "if (value!=null && value!='' && !rule.phone.test(value)) null && value!='' && !rule.email.test(value)) 密码复杂程度 errorMsg=errorMsg||" "; var r=checkFun.pwdStrong(value); if(range>4) range=3if(r<range) =errorMsg||" "; if (!rule.zh.test(value)) if (!rule.card.test(value)) 默认配置 ValCheck.defaults = { formId:'verifyCheck',1)">验证的ID checkClass:'required',1)">需要验证的DOM元素上默认class类名 onBlur:null,1)">被验证元素失去焦点的回调函数 onFocus:被验证元素获得焦点的回调函数 onChange: 被验证元素值改变的回调函数,回调参数为当前DOM元素 successTip: true,1)">验证通过是否有提示 resultTips:验证提示的回调函数，传回参数obj[当前元素],isRight[验证是否通过],value[提示的值] clearTips:null 清空提示的回调函数，传回参数obj[当前元素] }; 验证初始化 ValCheck.prototype._init = (config){ var self = this; self.allinputs = document.getElementsByClassName(ValCheck.defaults.checkClass); self.allinputs = Array.prototype.slice.call(self.allinputs,0); for(var item =0,len = self.allinputs.length; item < len; item++){ ((i){ self.allinputs[i].addEventListener('blur',1)">(e){ e.preventDefault(); var state = self.formValidator(self.allinputs[i]); config.onBlur ? config.onBlur(self.allinputs[i],state) : ''; },false); self.allinputs[i].addEventListener('focus',1)">if(config.onFocus){ config.onFocus(self.allinputs[i]); }{ var matched = []; 存放兄弟节点 var n = (self.allinputs[i].parentNode || {}).firstChild; for(; n; n = n.nextSibling){ if(n.nodeType === 1 && n !== self.allinputs[i]){ n.innerHTML = ''; } } } },1)">); self.allinputs[i].addEventListener('change',1)">(e){ e.preventDefault(); config.onChange ? config.onChange(self.allinputs[i]) : ''; },1)">); })(item); } } * 验证规则 * @param el 当前被验证的DOM元素 * */ ValCheck.prototype.formValidator = (el){ ; var validataString = el.getAttribute('data-valid'if(validataString === undefined){ return ; } var validArray = validataString.split('||'); var errorString = el.getAttribute('data-error'if(errorString ===var errorArray = errorString.split('||'var ruleArray = []; var i =0,j = validArray.length; i < j; i++){ ruleArray.push({ funTitle:validArray[i],errorMsg:errorArray[i] }); } self.validataResult(el,ruleArray); } * 验证结果 * @param el 验证的DOM元素 * @param ruleArray 需要逐一验证的数组规则 * ValCheck.prototype.validataResult = (el,ruleArray){ var i = 0,rule; rule = ruleArray[i++];){ var applyArgs = rule.funTitle.split(':'); var errorMsg = rule.errorMsg; var ruleFun = applyArgs.shift();得到匹配删除的函数名 applyArgs.unshift(el.value); 数组第一位插入value值 applyArgs.push(errorMsg); 最后插入出错信息 applyArgs.push(el); var result = self.rules[ruleFun].apply(el,applyArgs); (result){ opts.resultTips ? opts.resultTips(el,1)">false,result) : self.resultTips(el,result); ; } } opts.successTip ? ( opts.resultTips ? opts.resultTips(el,1)">true) : self.resultTips(el,1)">true) ) : self.clearTip(el); ; } * 验证信息的显示 * @param el 当前被验证的DOM元素 * @param isRight 验证是否通过， false=未通过 true=验证通过 * @param value 提示信息 * ValCheck.prototype.resultTips = var cls = 'el_error'var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)',"g"); value = value || ''if(!isRight){ el.className.match(reg)){ el.className += ' ' + cls; } }{ (el.className.match(reg)){ el.className = el.className.replace(reg,''); } } 存放兄弟节点 var n = (el.parentNode || {}).firstChild; n.nextSibling){ el){ n.innerHTML = value; 赋值提示信息 } } }; * 清空提示 * @param el 清空提示的DOM元素 ValCheck.prototype.clearTip = new RegExp('(\\s|^)' + cls + '(\\s|$)'); el.className.replace(reg,''); }; ***************对外开放方法******************/ * 外部可调用click方法,比如点击事件时候调用checkFun.click(),验证成功返回true * @param formId 验证DOM为formId区域下的表单 * @result {boolen} true or false * checkFun.click = (formId){ formId = formId || opts.formId; var resultObj = []; 存放需要验证的DOM对象 var rangeobj = document.getElementById(formId); (rangeobj.getElementsByClassName){ rangeobj = [].slice.apply(rangeobj.getElementsByClassName(ValCheck.defaults.checkClass)); }var tags = rangeobj.getElementsByTagName("*"); 遍历每个DOM元素 ){ 获取到当前遍历元素所使用的所有类名 var classNames = tags[i].className.split(" "); var j = 0,l=classNames.length; j < l; j++){ if(classNames[j] == ValCheck.defaults.checkClass){ rangeobj.push(tags[i]); break; } } } } var check = ValCheck(); var checkResultNumber = 0; 检测结果,检查通过的数目 var resultState = 开始验证所有DOM元素 var domNumber = 0,domlen = rangeobj.length; domNumber < domlen; domNumber++){ everyResultState = check.formValidator(rangeobj[domNumber]); (everyResultState){ checkResultNumber ++; } } if(checkResultNumber !== domlen ){ resultState = false; } resultState; }; * 判断密码强度 * @param val 当前DOM元素的value值 * @return {number} 返回数字等级 * checkFun.pwdStrong = (val){ var lv=0if(val.match(/[a-z]/g)){lv++;} if(val.match(/[A-Z]/g)){lv++if(val.match(/[0-9]/g)){lv++if(val.match(/(.[^a-z0-9A-Z])/g)){lv++;} if(lv > 4){lv=4if(lv===0) lv; } window.checkFun = checkFun; })();
css代码：
.same{margin-bottom: 30px;position:relative;}
.same input{border:1px solid #ccc;width:200px;height:30px;line-height: 30px;padding-left:10px;}
.valid{color:red;position:absolute;}
.submitBtn{cursor: pointer;}
<div id="verifyCheck"> class="same"> input type="text" placeholder="邮箱" value="" class="required email" id="email" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确"/> label ="focus valid"></label</div="password"="密码"="required password"="isNonEmpty||between:3-5"="密码不能为空||密码长度在3-5位"="重复密码"="required password2"="password2"="isNonEmpty||isRepeat:password"="密码不能为空||两次输入的密码不一致"button ="submitBtn"="submitBtn">提交button> >
JS调用：
checkFun({ onBlur:(){ checkFun.click(); },1)">false)
关于表单校验相关的文章可参考：
