主要用到了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各个字
完全验证代码
/*表单验证解析器*/
/*隐藏及不在页面显示的控件不进行验证*/
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;
};
}
);