在做项目的时候有许多表单需要验证,而这些验证只是一些简易的验证,类似必填,格式之类,为此,有必要整理一个简易通用且容易扩展的表单验证方法。
以下方法思路为:
为需要验证的输入项添加两个自定义属性作为判断的依据以及需要执行的验证
validate="这里输入验证方法,多种验证以分号隔开"
msg="这里输入验证不合格时提示的信息,与validate一一对应,如果信息数少于验证方法数量,则后面的验证不合格时将显示最后一条提示信息"
验证方法可自行扩展,形如:
var rules = {
isFilled:function(validate里提供的参数,可有可无){return function(由后面程序中传递进来的参数$value){return $value.replace(//s/g,"").length>0&&$value!=validate里提供的参数}}
}
使用如下:
<input type="text" validate="isFilled" msg="本项目必须填写!">
代码如下:
<script type="text/javascript">
var nameSpace = {
checkForm:function(dForm){
if(!dForm) return false;
var rules = {
isFilled:function(s){return function($value){return $value.replace(//s/g,"").length>0&&$value!=s}},
isNaN:function(){return function($value){return (!$value)?true:isNaN($value)}},
isNumber:function(){return function($value){return (!$value)?true:!isNaN($value)}},
isInt:function(){return function($value){return (!$value)?true:parseInt($value)==$value}},
isEmail:function(){return function($value){return (!$value)?true:/^(?:/w/.?)*/w+@(?:/w/.?)+/w+$/i.test($value)}},
isEmailList:function(){return function($value){return (!$value)?true:/^(?!;)(?:(?:;|^)([^@.;])+@[^.@;]+(?:/.[^.@;]+)+)+$/i.test($value)}},
fileType:function(list){return function($value){var r = new RegExp('/.(?:'+list+')$','i');return (!$value)?true:r.test($value)}},
moreThan:function(n){return function($value){return (!$value)?true:$value>n}},
lessThan:function(n){return function($value){return (!$value)?true:$value<n}},
equalTo:function(n){return function($value){return (!$value)?true:$value==n}},
maxLength:function(n){return function($value){return (!$value)?true:!($value.length>n)}},
minLength:function(n){return function($value){return (!$value)?true:!($value.length<n)}}
}
var chkInput = function(dObj){
for(var i=0,l=dObj.length;i<l;i++){
var dT = dObj[i];
var vr = dT.getAttribute('validate');//validate property
var vm = dT.getAttribute('msg');//msg property
var $value = dT.value;//value
if(vr){
vr = vr.split(';'),vm = vm.split(';');
for(var n=0;n<vr.length;n++){
var avr = vr[n].match(/^(/w+)/(([^/)]*)/)$/i);//match the validate string look like 'fooName(xxx)'
var avrName = avr?avr[1]:vr[n];//fooName
var avrArgs = avr?avr[2]:null;//xxx
var msg = vm[n]?vm[n]:vm[vm.length-1];//alert message
var EVR = (rules[avrName])?rules[avrName](avrArgs)($value):false;
if(!EVR){
alert(msg);
dT.focus();
return false;
}
}
}
}
return true;
}
return chkInput(dForm.elements);
}
}
</script>
在线演示,请参见 http://www.v-ec.com/jslib
【easy Validate】 部分!
以下方法思路为:
为需要验证的输入项添加两个自定义属性作为判断的依据以及需要执行的验证
validate="这里输入验证方法,多种验证以分号隔开"
msg="这里输入验证不合格时提示的信息,与validate一一对应,如果信息数少于验证方法数量,则后面的验证不合格时将显示最后一条提示信息"
验证方法可自行扩展,形如:
var rules = {
isFilled:function(validate里提供的参数,可有可无){return function(由后面程序中传递进来的参数$value){return $value.replace(//s/g,"").length>0&&$value!=validate里提供的参数}}
}
使用如下:
<input type="text" validate="isFilled" msg="本项目必须填写!">
代码如下:
<script type="text/javascript">
var nameSpace = {
checkForm:function(dForm){
if(!dForm) return false;
var rules = {
isFilled:function(s){return function($value){return $value.replace(//s/g,"").length>0&&$value!=s}},
isNaN:function(){return function($value){return (!$value)?true:isNaN($value)}},
isNumber:function(){return function($value){return (!$value)?true:!isNaN($value)}},
isInt:function(){return function($value){return (!$value)?true:parseInt($value)==$value}},
isEmail:function(){return function($value){return (!$value)?true:/^(?:/w/.?)*/w+@(?:/w/.?)+/w+$/i.test($value)}},
isEmailList:function(){return function($value){return (!$value)?true:/^(?!;)(?:(?:;|^)([^@.;])+@[^.@;]+(?:/.[^.@;]+)+)+$/i.test($value)}},
fileType:function(list){return function($value){var r = new RegExp('/.(?:'+list+')$','i');return (!$value)?true:r.test($value)}},
moreThan:function(n){return function($value){return (!$value)?true:$value>n}},
lessThan:function(n){return function($value){return (!$value)?true:$value<n}},
equalTo:function(n){return function($value){return (!$value)?true:$value==n}},
maxLength:function(n){return function($value){return (!$value)?true:!($value.length>n)}},
minLength:function(n){return function($value){return (!$value)?true:!($value.length<n)}}
}
var chkInput = function(dObj){
for(var i=0,l=dObj.length;i<l;i++){
var dT = dObj[i];
var vr = dT.getAttribute('validate');//validate property
var vm = dT.getAttribute('msg');//msg property
var $value = dT.value;//value
if(vr){
vr = vr.split(';'),vm = vm.split(';');
for(var n=0;n<vr.length;n++){
var avr = vr[n].match(/^(/w+)/(([^/)]*)/)$/i);//match the validate string look like 'fooName(xxx)'
var avrName = avr?avr[1]:vr[n];//fooName
var avrArgs = avr?avr[2]:null;//xxx
var msg = vm[n]?vm[n]:vm[vm.length-1];//alert message
var EVR = (rules[avrName])?rules[avrName](avrArgs)($value):false;
if(!EVR){
alert(msg);
dT.focus();
return false;
}
}
}
}
return true;
}
return chkInput(dForm.elements);
}
}
</script>
在线演示,请参见 http://www.v-ec.com/jslib
【easy Validate】 部分!