jquery 通用表单验证

主要用到了jquery，以及自定义的一个属性wl_check，属性说明如下：

 
1、语法
 [need:true,type:int,maxlen:15,minlen:2]

 

2、关键字
 need：文本输入框的必填限制
 regtype：文本输入框的正则表达式类别验证
 minlen：文本输入框的最小输入长度
 maxlen：文本输入框的最大输入长度
 minval：数字型文本输入框的最值
 maxval：数字型文本输入框的最值
 notval：下拉框的必选设置
 minselect：单复选框的最少选项数
 maxselect：单复选框的最多选项数
 sequence：默认从100--1000，如果需要打乱页面控件顺序可设置值，<100 或 >1000，按从小到大验证
 group：【group:txtArea-1-1】其中“txtArea”是pre控件值，“-1-1”表示最少填写一个，最多填写一个。
 manage：可以设置与某一控件的关系“= != > < >= <= + -”
 ...

 

3、使用范围
 input:text
 input:radio 注意id为'_i'
 input:checkbox 注意id为'_i'
 textarea
 select
 
4、描述
a、在有wl_check属性的表单控件值发生变化时会自行调用相应的验证方法，该方法无返回值，只是出错提示并定位。
b、在页面post时需要先对某一域内有wl_check属性的表单控件进行验证，通过返回true；否则弹出提示信息并取消提交。

 

5、使用示例-见demo
 

        <input type="text" id="name" value='dd' title='姓名' wl_check="need:true,minlen:2,maxlen:10,sequence:1" />
 表示该文本框必填，并且最多10个字，最少2各个字

 

完全验证代码

/**********************************************************************/ /*当前版本1.1*/ /*linfeng-林峰|2010-04-编写与上海浦东|用于：表单验证【该行请勿删除】*/ /*linfeng-林峰|2010-08-12-修改*/ /**********************************************************************/ /*表单验证解析器*/ /*隐藏及不在页面显示的控件不进行验证*/ function formCheck(domid) { var obj = new formcheckparse(domid, "check"); return obj.check(); } /*控件onblur事件时处罚*/ /*单个控件onblur事件不执行为空判断*/ function blurCheck(domid) { $("input:text[wl_check]").each(function(i) { $(this).blur(function() { var obj = new formcheckparse(domid, "blur"); obj.blurcheck($(this)); }); }); $("textarea[wl_check]").each(function(i) { $(this).blur(function() { var obj = new formcheckparse(domid, "blur"); obj.blurcheck($(this)); }); }); $("input:password[wl_check]").each(function(i) { $(this).blur(function() { var obj = new formcheckparse(domid, "blur"); obj.blurcheck($(this)); }); }); } /*-----------------------------------------------------------------------------------------*/ /*以下为封装脚本-仅供学习*/ /*-----------------------------------------------------------------------------------------*/ jQuery(formcheckparse = function(domid, ctype) { this.author = "linfeng-林峰|2010-04-编写与上海浦东|用于：表当验证【该行请勿删除】"; this.domid = domid; this.blurcheck = function(obj) {/*控件onblur事件时处罚*/ obj.val($.trim(obj.val())); /*去掉开始结束的空格alert(obj.attr('wl_check')); alert(obj.val());*/ var my_array = obj.attr('wl_check').split(','); /*当前处理控件的验证键值组*/ match(obj, my_array); }; this.check = function() { var arr_control = new Array(); /*排序字段默认从100开始到1000结束，如果需要附加排序请记住该规则，可以设置<100或>1000*/ function MyObjectControls(_obj, _sequence, _group, _manage) { this.control = _obj; this.sequence = _sequence; this.group = _group; this.manage = _manage; } var returnValue = true; $("#" + this.domid + " input:text[wl_check]:visible").each(function(i) { $(this).val($.trim($(this).val())); /*去掉开始结束的空格*/ arr_control.push($(this)); }); /*验证输入框*/ $("#" + this.domid + " textarea[wl_check]:visible").each(function(i) { $(this).val($.trim($(this).val())); /*去掉开始结束的空格*/ arr_control.push($(this)); }); /*验证多行输入框*/ $("#" + this.domid + " input:password[wl_check]:visible").each(function(i) { $(this).val($.trim($(this).val())); /*去掉开始结束的空格*/ arr_control.push($(this)); }); /*验证密码输入框*/ $("#" + this.domid + " select[wl_check]:visible").each(function(i) { arr_control.push($(this)); }); /*验证下拉框*/ $("#" + this.domid + " span[wl_check]:visible").each(function(i) { arr_control.push($(this)); }); /*验证单复选框*/ $("#" + this.domid + " table[wl_check]:visible").each(function(i) { arr_control.push($(this)); }); /*验证单复选框*/ if (arr_control.length > 0) { /*20100813-增加控件的排序*/ /*20100813-增加控件的分组*/ /*20100813-增加控件的受控*/ var arrMyObjectControls = new Array(); var arrMyObjectGroups = new Array(); var arrMyObjectBeManages = new Array(); /*设置排序值*/ for (var i = 0; i < arr_control.length; i++) { /*20100813-排序*/ var thisSequence = gettypevalue(arr_control[i], 'sequence', i + 100); /*20100813-分组*/ var thisGroup = gettypevalue(arr_control[i], 'group', ''); /*20100813-受控*/ var thisManage = gettypevalue(arr_control[i], 'manage', ''); /*调试点：alert(thisSequence);*/ var newMyObjectControls = new MyObjectControls(arr_control[i], thisSequence,thisGroup,thisManage); /*将分组的控件放入数组*/ if(thisGroup.length>0){ arrMyObjectGroups.push(newMyObjectControls); } /*将受控的控件放入数组*/ if(thisManage.length>0){ arrMyObjectBeManages.push(newMyObjectControls); } arrMyObjectControls.push(newMyObjectControls); } /*冒泡排序-按排序逆序*/ var len = arrMyObjectControls.length; /*调试点：alert(len);*/ for (var i = 0; i < len; i++) { var boolchg = false; for (var j = 0; j < len - 1; j++) { var One = arrMyObjectControls[j]; var Two = arrMyObjectControls[j + 1]; /*调试点：alert(arrMyObjectControls[j].sequence+'|'+j);*/ if (parseInt(One.sequence) > parseInt(Two.sequence)) { arrMyObjectControls[j] = Two; arrMyObjectControls[j + 1] = One; boolchg = true; } } if (!boolchg) break; } /*遍历验证*/ for (var i = 0; i < arrMyObjectControls.length; i++) { /*调试点：alert(arrMyObjectControls[i].sequence);*/ var my_array = arrMyObjectControls[i].control.attr('wl_check').split(','); /*当前处理控件的验证键值组*/ /*if (this.author.indexOf('lin') == -1 || this.author.indexOf('林') == -1) return true;*/ returnValue = match(arrMyObjectControls[i].control, my_array); if (!returnValue) return returnValue; /*分组测试-调试点：alert(arrMyObjectControls[i].group+'|'+arrMyObjectControls[i].control.attr('id'));*/ if(arrMyObjectControls[i].group.length>1 && arrMyObjectControls[i].group.indexOf(arrMyObjectControls[i].control.attr('id'))!=-1){ returnValue = grouptest(arrMyObjectControls, arrMyObjectGroups,i); if (!returnValue) return returnValue; } /*受控测试-调试点：alert(arrMyObjectControls[i].manage+'|'+arrMyObjectControls[i].control.attr('id'));*/ if(arrMyObjectControls[i].manage.length>1 && arrMyObjectControls[i].manage.indexOf(arrMyObjectControls[i].control.attr('id'))!=-1){ returnValue = managetest(arrMyObjectControls,i); if (!returnValue) return returnValue; } } } return returnValue; }; /**私有函数**/ match = function(obj, my_array) {/*私有方法-解析验证方式*/ var returnValue = true; /*alert(obj.attr('wl_check'));alert(my_array.length);*/ if (my_array.length > 0) { for (var i = 0; i < my_array.length; i++) { var my_array_items = new Array(); my_array_items = my_array[i].split(':'); if (my_array_items.length > 1) { returnValue = matchItem(obj, my_array, my_array_items[0], my_array_items[1]); } if (!returnValue) break; } } return returnValue; }; grouptest = function(_arrControls, _arrGroups, _i) {/*私有方法-分组测试*/ var arrGroup = _arrControls[_i].group.split('-'); var minGroup = arrGroup[1]; var maxGroup = arrGroup[2]; var nowGroup = 0; var infoGroup = '“'; for (var k = 0; k < _arrGroups.length; k++) { if(_arrGroups[k].group==_arrControls[_i].group){ infoGroup += _arrGroups[k].control.attr('title')+'、'; if(_arrGroups[k].control.val().length>0){ nowGroup++; } } } infoGroup += '”'; infoGroup =infoGroup.split( '、”').join('”'); if(nowGroup<minGroup){ alert(infoGroup+'中至少要填写'+ minGroup +'项！'); _arrControls[_i].control.focus(); return false; } if(nowGroup>maxGroup){ alert(infoGroup+'中最多填写'+ maxGroup +'项！'); _arrControls[_i].control.focus(); return false; } return true; }; managetest = function(_arrControls, _i) {/*私有方法-受控测试*/ var manage_type = '+'; var arrManage = null; if(_arrControls[_i].manage.indexOf('-')!=-1){ manage_type = '-'; arrManage = _arrControls[_i].manage.split('-'); } else if(_arrControls[_i].manage.indexOf('-')!=-1){ manage_type = '+'; arrManage = _arrControls[_i].manage.split('+'); } else if(_arrControls[_i].manage.indexOf('!=')!=-1){ manage_type = '!='; arrManage = _arrControls[_i].manage.split('!='); } else if(_arrControls[_i].manage.indexOf('=')!=-1){ manage_type = '='; arrManage = _arrControls[_i].manage.split('='); } else if(_arrControls[_i].manage.indexOf('>=')!=-1){ manage_type = '>='; arrManage = _arrControls[_i].manage.split('>='); } else if(_arrControls[_i].manage.indexOf('<=')!=-1){ manage_type = '<='; arrManage = _arrControls[_i].manage.split('<='); } else if(_arrControls[_i].manage.indexOf('>')!=-1){ manage_type = '>'; arrManage = _arrControls[_i].manage.split('>'); } else if(_arrControls[_i].manage.indexOf('<')!=-1){ manage_type = '<'; arrManage = _arrControls[_i].manage.split('<'); } var nowManage = 0; var aManage =$('#'+arrManage[0]); var bManage =$('#'+arrManage[1]); var infoManage = aManage.attr('title')+'、'+bManage.attr('title'); /*测试点：alert(infoManage);*/ if(aManage.val().length>0){ nowManage++; } if(bManage.val().length>0){ nowManage++; } if(manage_type == '+' && nowManage==1){ alert(infoManage+'必须同时填写！'); _arrControls[_i].control.focus(); return false; } else if(manage_type == '-' && nowManage==2){ alert(infoManage+'至多填写一项！'); _arrControls[_i].control.focus(); return false; } else if(manage_type == '-' && nowManage==0){ alert(infoManage+'至少填写一项！'); _arrControls[_i].control.focus(); return false; } else if(manage_type == '!=' && aManage.val()==bManage.val()){ alert(infoManage+'输入值不可以一样！'); _arrControls[_i].control.focus(); return false; } else if(manage_type == '=' && aManage.val()!=bManage.val()){ alert(infoManage+'输入值必须一样！'); _arrControls[_i].control.focus(); return false; } else if(manage_type == '>=' && aManage.val()<bManage.val()){ alert(aManage.attr('title')+'必须不小于'+bManage.attr('title')+'！'); _arrControls[_i].control.focus(); return false; } else if(manage_type == '<=' && aManage.val()>bManage.val()){ alert(aManage.attr('title')+'必须不大于'+bManage.attr('title')+'！'); _arrControls[_i].control.focus(); return false; } else if(manage_type == '>' && aManage.val()<=bManage.val()){ alert(aManage.attr('title')+'必须大于'+bManage.attr('title')+'！'); _arrControls[_i].control.focus(); return false; } else if(manage_type == '<' && aManage.val()>=bManage.val()){ alert(aManage.attr('title')+'必须小于'+bManage.attr('title')+'！'); _arrControls[_i].control.focus(); return false; } return true; }; gettypevalue = function(_control, _type, _defaultValue) {/*私有方法-获取自定义属性值，默认100*/ var returnValue = _defaultValue; var my_array = _control.attr('wl_check').split(','); if (my_array.length > 0 && _control.attr('wl_check').indexOf(_type + ':') != -1) { for (var i = 0; i < my_array.length; i++) { if (my_array[i].indexOf(_type + ':') != -1) { var my_array_items = new Array(); my_array_items = my_array[i].split(':'); if (my_array_items.length > 0) { returnValue = my_array_items[1]; } } } } return returnValue; }; getinfo = function(my_array) {/*私有方法-获取自定义提示信息*/ var returnInfo = ""; /*alert(my_array.join(','));*/ if (my_array.length > 0 && my_array.join(',').indexOf('info:') != -1) { for (var i = 0; i < my_array.length; i++) { if (my_array[i].indexOf('info:') != -1) { var my_array_items = new Array(); my_array_items = my_array[i].split(':'); if (my_array_items.length > 0) { returnInfo = my_array_items[1]; } } } } /*alert(returnInfo);*/ return returnInfo; }; matchItem = function(obj, my_array, key, val) {/*私有方法-项目验证*/ var boolReturn = true; /*alert(obj.attr('wl_check'));alert(key);*/ switch (key) { case 'need': boolReturn = isEmpity(obj, my_array); break; case 'regtype': boolReturn = isRegMatch(obj, my_array, key, val); break; case 'minlen': boolReturn = isTooShort(obj, my_array, key, val); break; case 'maxlen': boolReturn = isTooLong(obj, my_array, key, val); break; case 'minval': boolReturn = isTooMin(obj, my_array, key, val); break; case 'maxval': boolReturn = isTooMax(obj, my_array, key, val); break; case 'notselect': boolReturn = isNotSelect(obj, my_array, key, val); break; case 'minselect': boolReturn = isTooMinSelect(obj, my_array, key, val); break; case 'maxselect': boolReturn = isTooMaxSelect(obj, my_array, key, val); break; default: break; } return boolReturn; }; isTooMinSelect = function(obj, my_array, key, val) {/*OK--私有方法-是否选择了过多项*/ var boolReturn = true; /*alert(obj.attr('wl_check'));alert(obj.attr('id'));*/ var _count = getSelectCount(obj.attr('id')); if (_count < val) { var info = getinfo(my_array); if (info == '') info = obj.attr('title') + "至少选择" + val + "项！"; alert(info); obj[0].focus(); boolReturn = false; } return boolReturn; }; isTooMaxSelect = function(obj, my_array, key, val) {/*OK--私有方法-是否选择了过多项*/ var boolReturn = true; /*alert(obj.attr('wl_check'));alert(obj.val());*/ var _count = getSelectCount(obj.attr('id')); if (_count > val) { var info = getinfo(my_array); if (info == '') info = obj.attr('title') + "最多选择" + val + "项！"; alert(info); obj[0].focus(); boolReturn = false; } return boolReturn; }; getSelectCount = function(spanid) {/*OK--私有方法-返回某一域内单选复选框已选择个数*/ var intReturn = 0; /*alert($("#"+spanid+" input").length);alert(spanid);*/ $("#" + spanid + " input[type=checkbox]").each(function(i) { if (this.checked) intReturn++; }); $("#" + spanid + " input[type=radio]").each(function(i) { if (this.checked) intReturn++; }); return intReturn; }; isNotSelect = function(obj, my_array, key, val) {/*OK--私有方法-是否选择了默认值*/ var boolReturn = true; /*alert(obj.attr('wl_check'));alert(obj.val());*/ if (obj.val() == val) { var info = getinfo(my_array); if (info == '') info = "请选择" + obj.attr('title') + "！"; alert(info); obj[0].focus(); boolReturn = false; } return boolReturn; }; isRegMatch = function(obj, my_array, key, val) {/*OK--私有方法-是否太小*/ var boolReturn = true; /*alert(obj.attr('wl_check'));alert(obj.val() + '|' + val);*/ var crReturn = cregMatch(obj.val(), val) + ''; if (crReturn.toLowerCase() == 'false') { var info = getinfo(my_array); if (info == '') info = obj.attr('title') + "格式错误，请准确输入！"; alert(info); obj[0].focus(); boolReturn = false; } return boolReturn; }; isTooMin = function(obj, my_array, key, val) {/*OK--私有方法-是否太小*/ var boolReturn = true; /*alert(obj.attr('wl_check'));*/ if (boolReturn && parseFloat(obj.val()) < parseFloat(val)) { var info = getinfo(my_array); if (info == '') info = obj.attr('title') + "输入值太小，最小值为" + val + "！"; alert(info); obj[0].focus(); boolReturn = false; } return boolReturn; }; isTooMax = function(obj, my_array, key, val) {/*OK--私有方法-是否太大*/ var boolReturn = true; /*alert(obj.attr('wl_check'));*/ if (boolReturn && parseFloat(obj.val()) > parseFloat(val)) { var info = getinfo(my_array); if (info == '') info = obj.attr('title') + "输入值太大，最大值为" + val + "！"; alert(info); obj[0].focus(); boolReturn = false; } return boolReturn; }; isTooLong = function(obj, my_array, key, val) {/*OK--私有方法-是否太长*/ var boolReturn = true; /*alert(obj.attr('wl_check'));*/ if (boolReturn && obj.val().length > val) { var info = getinfo(my_array); if (info == '') info = obj.attr('title') + "输入值太长，请最多输入" + val + "个字！"; alert(info); obj[0].focus(); boolReturn = false; } return boolReturn; }; isTooShort = function(obj, my_array, key, val) {/*OK--私有方法-是否太短*/ var boolReturn = true; /*alert(obj.attr('wl_check'));*/ if (boolReturn && obj.val().length < val) { var info = getinfo(my_array); if (info == '') info = obj.attr('title') + "输入值太短，请至少输入" + val + "个字！"; alert(info); obj[0].focus(); boolReturn = false; } return boolReturn; }; isEmpity = function(obj, my_array) {/*OK--私有方法-是否为空*/ var boolReturn = true; /*alert(obj.attr('wl_check'));alert(ctype);*/ if (boolReturn && ctype != 'blur' && obj.val() == "") { var info = getinfo(my_array); if (info == '') info = obj.attr('title') + "不可为空！"; alert(info); obj[0].focus(); boolReturn = false; } if (ctype == 'blur' && obj.val() == "") return false; return boolReturn; }; cregMatch = function(str, type) {/*私有方法-正则表达式验证*/ str = str.toLowerCase(); /*alert(str + '|' + type);*/ var re = null; re = /[/x00-/xff]/g; if (type == 'money') { re = /^(([1-9][0-9]*/.[0-9]+)|([0]/.[0-9]*[1-9]+[0-9]*)|([1-9][0-9]*)|0)$/g; //金钱、包括0 } else if (type == 'uname') { re = /^(/w{3,})$/g; //用户名 } else if (type == 'int') { re = /^(([1-9][0-9]*)|0)$/g; //正整数+0 } else if (type == 'idcard') { if (str.length != 15 && str.length != 18) return false; re = /^([0-9]/d{5})(((([1][9])?)/d{2})|([2]/d{3}))(([1][0-2])|([0][1-9]))(([0-2][1-9])|([1-3][0])|31)(/d{2,3}([x]|[0-9]))$/g; //简易验证身份证 } else if (type == 'info') { re = /^(([^x]|[x])*[/u4E00-/u9FA5]+([^x]|[x])*)$/g; //必须有汉字 } else if (type == 'percent') { re = /^(([1-9][0-9]?/.[0-9]{1,3})|([0]/.[0-9]{0,2}[1-9])|([0]/.[1-9][0-9]{0,2})|([0]/.[0-9][1-9][0-9])|([1-9][0-9]?)|0|100)$/g; } else if (type == 'emil') { re = /^(/w+([-+.']/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*)$/g; } else if (type == 'mobile') { re = /^([1][3|5]/d{9})$/g; } else if (type == 'timeymd') { re = /^((((([1][9])|([2][0]))?)/d{2})/-(([1][0-2])|([0][1-9])|[1-9])/-(([0-2][1-9])|([1-3][0])|31|[1-9]))$/g; //时间 } else if (type == 'checkcode4') { re = /^(/d{4})$/g; } else if (type == 'age_2') { re = /^([1-9][0-9]?)$/g; } else if (type == 'int_3') { re = /^([1-9][0-9]{0,2})$/g; } else if (type == 'int_4') { re = /^([1-9][0-9]{2,3})$/g; } else if (type == 'zipcode') { re = /^(/d{6})$/g; } else if (type.length >0) { type=type.split(';').join(','); re = new RegExp(type, "ig"); } return str.match(re) ? true : false; }; } );