首页 > 代码库 > 简约的form表单校验插件
简约的form表单校验插件
前言
网上有好多form表单校验插件，包括jquery的表单检验插件，这些中好多插件功能很齐全强大，提示方式很酷，很美观好看。本想拿来用，但是发现几个问题：
1、使用不方便。校验规则繁多，调用校验函数难记忆。
2、提示方式固定。一般插件给出固定的几种提示方式，但是实际中，不同系统都有自己的页面风格样式，有自己的提示方式，插件自带的一般用不上。
因此，我最终没有采用这些插件，以免用后出现难以修改或实现的情况。
如果一种校验插件能避免以上两个问题最好了，方便使用，提示方式自定义 ，所以自己做了一个简单的校验器，希望能慢慢完善。
正文
先来一个DEMO
1、html:
<ul id="form"> <li> <span class="name-col">姓名：</span> <span class="value-col"> <input type="text" name="username" minLength="5" maxLength="20" required afterFunc="showTip"></input> </span> </li> <li> <span class="name-col">年龄：</span> <span class="value-col"> <input type="text" vtype="number" min="18" max="40" step="1" name="age" onEvent="keyup" beforeFunc="modify" afterFunc="showTip"></input> </span> </li> <li> <span class="name-col">电话：</span> <span class="value-col"> <input type="text" name="phone" pattern="^(0[0-9]{2,3}\-)?[2-9][0-9]{6,7}(\-[0-9]{1,4})?$" afterFunc="showTip"></input> </span> </li> <li> <span class="name-col">性别：</span> <span class="value-col"> <input type="radio" name="sex" checked />男 <input type="radio" name="sex" />女 </span> </li> <li> <span class="name-col">爱好：</span> <span class="value-col"> <input type="checkbox" name="love" value="1" />爬山 <input type="checkbox" name="love" value="2" />游泳 <input type="checkbox" name="love" value="3" />音乐 <input type="checkbox" name="love" value="4" />读书 </span> </li> <li> <span class="name-col">自我描述：</span> <span class="value-col"> <textarea name="description" minLength="10" maxLength="20" afterFunc="showTip"></textarea> </span> </li> <li> <button onclick="validate()" >validate</button> <button onclick="disabd()">disabled</button> </li></ul>
2、js调用方法:
$(function(){ $("#form").validateInit();});var modify = function(source){ source.val(source.val().replace(/[^0-9]+/g,‘‘));};var validate = function(){ var res = $("#form").validate(); alert(res.valid);};var showTip = function(e){ var res = e.getVresult(); if(res && res.valid == false){ e.next().remove(); e.after(‘<span>‘+res.errorType+‘</span>‘); }else{ e.next().remove(); }};var disabd = function(){ $("#form").disableValidate();}
说明：
1、 校验规则添加到表单元素的属性上，属性使用类似html5的表单校验。
<input type="text" name="username" minLength="5" maxLength="20" required afterFunc="showTip"></input>
<input type="text" vtype="number" min="18" max="40" step="1" name="age" onEvent="keyup" beforeFunc="modify" afterFunc="showTip"></input>
以上input的例子：vtype="number"说明为number类型，min=18,max=40,step=1，这些规则可代码就可以知道是什么意思。
2、js校验调用：
页面初始化时：$("#form").validateInit();
校验时调用：$("#form").validate();
这里$("#form")可以是单个表单元素（input）可以是容器（form）。
使用很简单方便吧。
具体说明：
1、表单元素上的校验属性：
pattern：自定义正则表达式，这个很好用，以至于不想写下面的vtype其他种类了。
vtype:校验类型 有number,email,tel。还有待添加。
min: vtype为number时的最小值
max:vtype为number时的最大值
step: vtype为number时，增加步长。
minLength：字符串最小长度
maxLength：字符串最大长度
required： 必填项
beforeFunc：校验前调用函数，传递参数为对象本身。
afterFunc：校验完成后调用函数，传递参数为对象本身。
onEvent: 将校验函数绑定到的事件。
2、插件方法：
validateInit 校验初始化--该方法会根据表单元素的属性，进行相应的校验函数绑定到blur事件上，
disableValidate 禁用校验--去掉校验事件，去掉校验结果
validate 校验--立即校验，结果保存saveVresult()，可以用getVresult().valid查看是否通过校验。
isFormElement 是否为表单元素--
vattr 校验属性的获取和设置
getVresult 获取校验结果
saveVresult 保存校验结果
这七个方法都在表单元素上。如$(‘div[name=‘form‘]‘).validate()则是校验div里面的所有表单元素。$(‘input[name=‘username‘]‘)则校验本身。
校验器代码：
/** * form 表单校验器 * 使用规则仿照html5表单验证情况。 * @author jokinliu@163.com * @date 2014-08-05 * @version V2.0 */(function($){ /** * 表单校验添加jquery插件方法，方法简介如下： * 1、validateInit 校验初始化 * 2、disableValidate 禁用校验 * 3、validate 校验 * 4、isFormElement 是否为表单元素 * 5、vattr 校验属性的获取和设置 * 6、getVresult 获取校验结果 * 7、saveVresult 保存校验结果 */ $.fn.extend({ /********************************************************************************* * 初始化校验 绑定校验事件 * validityObj: 校验选项，可选，如果设置了该选项，往后的校验就以该选项的值为主 * validityObj = { * vtype: 校验类型 * pattern: 校验正则表达式 * max: vtype为number是的最大值 * min: vtype为number是的最小值 * maxLength:非number是字符串的最大长度 * minLength:非number是字符串的最小长度 * step:vtype为number是的step * onEvent: * beforeFunc: func1, //校验前的执行方法，该方法接受对象本身参数$(this)。 * afterFunc: func2, //校验后的执行方法，该方法接受对象本身参数$(this)。 * } *********************************************************************************/ validateInit: function(validityObj){ if($(this).isFormElement()){ $(this).data(‘vresult‘,‘‘); event.onEvent($(this), validityObj); } else{ $(this).find(constants.formElements.join(‘,‘)).each(function(){ $(this).data(‘vresult‘,‘‘); event.onEvent($(this), validityObj); }); } }, /****************************************** * disabled校验功能 * 取消本对象上的校验相关 * 1、取消绑定校验事件。 * 2、取消校验结果，设置不可用标识$(this).data(‘vresult‘,‘disabled‘); ******************************************/ disableValidate: function(){ if($(this).isFormElement()){ event.offEvent($(this)); $(this).data(‘vresult‘,‘disabled‘); } else{ $(this).find(constants.formElements.join(‘,‘)).each(function(){ event.offEvent($(this)); $(this).data(‘vresult‘,‘disabled‘); }); } return $(this); }, /********************************************************************************* * 校验方法，开始校验 * validityObj: 校验选项，可选，如果设置了该选项，往后的校验就以该选项的值为主 * validityObj = { * vtype: 校验类型 * pattern: 校验正则表达式 * max: vtype为number是的最大值 * min: vtype为number是的最小值 * maxLength:非number是字符串的最大长度 * minLength:非number是字符串的最小长度 * step:vtype为number是的step * onEvent: * beforeFunc: func1, //校验前的执行方法，该方法接受对象本身参数$(this)。 * afterFunc: func2, //校验后的执行方法，该方法接受对象本身参数$(this)。 * } *********************************************************************************/ validate: function(validityObj){ if($(this).isFormElement()){ if(validityObj){ for(var attr in validityObj){ validityObj[attr] && source.vattr(attr, validityObj[attr]); } } return event.validate(‘‘, $(this)); } else{ var result = true; $(this).find(constants.formElements.join(‘,‘)).each(function(){ var res = event.validate(‘‘, $(this)); if(res && res.valid == false) result = false; }); return {valid:result}; } }, /********************************************* * 是否为表单元素 * 判断当前对象的tagName是否为INPUT,TEXTEREA等。 *********************************************/ isFormElement: function(){ var tag = $(this)[0].tagName; for(var i=0; i<constants.formElements.length; i++){ if(tag == constants.formElements[i]){ return true; } } return false; }, /******************************************************************** * 校验属性的获取和设置 * 将属性取出放置到data(‘validator‘)中 *******************************************************************/ vattr: function(attr, val){ !$(this).data(‘validator‘) && $(this).data(‘validator‘,{}); var data = http://www.mamicode.com/$(this).data(‘validator‘); if(val && (val+‘‘).trim() != ‘‘){ data[attr] = val; return $(this); } if(!data[attr]){ var attrVal = $(this).attr(attr); if(attrVal && attrVal.trim() != ‘‘){ if(attr == ‘beforeFunc‘ || attr == ‘afterFunc‘){ data[attr] = eval("("+attrVal.trim()+")"); }else{ data[attr] = attrVal.trim(); } } } return data[attr]; }, /***************************************************************** * 获取校验结果，从data(‘vresult‘)中 * 校验完成时，结果存储在当前对象的 $(this).data(‘vresult‘)中； * 结果对象为htmL5校验结果对象，并添加几个其他 * result = { * badInput: false, * customError: false, * errorType: "typeMismatch", //错误类型，记录值为true的属性到这里。 * patternMismatch: false, * rangeOverflow: false, * rangeUnderflow: false, * stepMismatch: false, * tooLong: false, * typeMismatch: true, * valid: false, * valueMissing: false * } *****************************************************************/ getVresult: function(){ return $(this).data(‘vresult‘); }, /***************************************************************** * 保存校验结果，到data(‘vresult‘)中 * 校验完成时，结果存储在当前对象的 $(this).data(‘vresult‘)中； * 结果对象为htmL5校验结果对象，并添加几个其他 * result = { * badInput: false, * customError: false, * errorType: "typeMismatch", //错误类型，记录值为true的属性到这里。 * patternMismatch: false, * rangeOverflow: false, * rangeUnderflow: false, * stepMismatch: false, * tooLong: false, * typeMismatch: true, * valid: false, * valueMissing: false * } *****************************************************************/ saveVresult: function(result){ var result = $.extend({},$(this)[0].validity, result); for(var attr in result){ if(attr != "valid" && result[attr] == true){ result.valid = false; result.errorType = attr; break; } } $(this).data(‘vresult‘, result); return $(this); } }); /****************************************** * jquery对象方法调用的事件函数 * 主要函数有： * 1、validate 校验 * 2、onEvent 添加事件 * 3、offEvent 取消事件 **************************************/ var event = { validate: function(event, source){ source = !source ? event.data.source : source; if(source.data(‘vresult‘)==‘disabled‘) return; //disabed used .disabedvalidate() //do beforeFunc source.vattr(‘beforeFunc‘) instanceof Function && source.vattr(‘beforeFunc‘)(source); //do validate source.saveVresult(validator.validate(source)); //do afterFunc source.vattr(‘afterFunc‘) instanceof Function && source.vattr(‘afterFunc‘)(source); return source.getVresult(); }, onEvent: function(source, validityObj){ if(validityObj){ for(var attr in validityObj) validityObj[attr] && source.vattr(attr, validityObj[attr]); } source.vattr(‘onEvent‘) && source.on(source.vattr(‘onEvent‘), {source:source}, this.validate); source.on(‘blur‘, {source:source}, this.validate); }, offEvent: function(source){ source.off(event, this.validate); source.off(‘blur‘, this.validate); } }; //常量 var constants = { formElements: [‘INPUT‘,‘TEXTAREA‘] }; var validator = { empty: function(value){ return !value || value.trim() == ‘‘; }, number: function(value){ if(this.empty(value)) return true; return /^\-?[1-9]\d*(\.\d+)?$/.test(value); }, min: function(value, min){ if(this.empty(value)) return true; return value*1>=min; }, max: function(value, max){ if(this.empty(value)) return true; return value*1<=max; }, step: function(value, step, min){ if(this.empty(value)) return true; min = this.number(min)?min*1:0; return (value*1-min)/step*1%1===0; }, tel: function(value){ if(this.empty(value)) return true; var reg = /^(0[0-9]{2,3}\-)?[2-9][0-9]{6,7}(\-[0-9]{1,4})?$/; return reg.test(value.trim()); }, mobile: function(value){ if(this.empty(value)) return true; var reg = /^1[3-8]\d{9}$/; return reg.test(value.trim()); }, email: function(value){ if(this.empty(value)) return true; var reg = /^.{2,}@.{2,}$/; return reg.test(value.trim()); }, pattern: function(value, regExp){ if(this.empty(value)) return true; return RegExp(regExp).test(value); }, validate: function(source){ if(!source.vattr(‘vtype‘) && !source.vattr(‘pattern‘) && !source.vattr(‘minLength‘) && !source.vattr(‘maxLength‘)) return; var vtype = source.vattr(‘vtype‘)?source.vattr(‘vtype‘):source.vattr(‘type‘); var val = source.val().trim(); source.val(val); //required validate if(source.vattr("required") == ‘required‘ && validator.empty(val)){ return {valueMissing:true}; } //vtype validate if(vtype == ‘number‘){ if(!validator.number(val)) return {typeMismatch:true}; if(source.vattr(‘min‘) && !isNaN(source.vattr(‘min‘)*1)){ if(!validator.min(val, source.vattr(‘min‘)*1)) return {rangeUnderflow:true}; } if(source.vattr(‘max‘) && !isNaN(source.vattr(‘max‘)*1)){ if(!validator.max(val, source.vattr(‘max‘)*1)) return {rangeOverflow:true}; } if(source.vattr(‘step‘) && !isNaN(source.vattr(‘step‘)*1)){ if(!validator.step(val,source.vattr(‘step‘),source.vattr(‘min‘))) return {stepMismatch:true}; } }else{ if(vtype == ‘email‘){ if(!validator.email(val)) return {typeMismatch:true}; }else if(vtype == ‘tel‘){ if(!validator.tel(val)) return {typeMismatch:true}; }else if(vtype == ‘url‘){ if(!validator.url(val)) return {typeMismatch:true}; } if(!validator.empty(val)){ if(source.vattr(‘minLength‘) && !isNaN(source.vattr(‘minLength‘)*1)){ if(val.length < source.vattr(‘minLength‘)*1) return {tooShort:true}; } if(source.vattr(‘maxLength‘) && !isNaN(source.vattr(‘maxLength‘)*1)){ if(val.length > source.vattr(‘maxLength‘)*1) return {tooLong:true}; } } } //pattern validate if(source.vattr(‘pattern‘) && source.vattr(‘pattern‘).trim() != ‘‘){ if(!validator.pattern(val, source.vattr(‘pattern‘))) return {patternMismatch:true}; } } }; /** * String trim */ String.prototype.trim = function(){ return this.replace(/(^\s*)|(\s*$)/g, ‘‘); }; String.prototype.leftTrim = function(){ return this.replace(/^\s*/g, ‘‘); }; String.prototype.rightTrim = function(){ return this.replace(/\s*$/g, ‘‘); };})(jQuery);
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。