Easy Validate简易表单验证

dh20156 dh20156 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
在做项目的时候有许多表单需要验证,而这些验证在更多的时候只是一些简易的验证,类似必填,格式之类,为此,有必要整理一个简易通用且容易扩展的表单验证方法。

以下方法思路为:

为需要验证的输入项添加两个自定义属性作为判断的依据以及需要执行的验证

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 isNaN($value)}},
isNumber:function(){return function($value){return !isNaN($value)}},
isInt:function(){return function($value){return parseInt($value)==$value}},
isEmail:function(){return function($value){return /^\w+@\w+(?:\.\w+)+$/i.test($value)}},
fileType:function(list){return function($value){var r = new RegExp('\.(?:'+list+')$','i');return r.test($value)}},
moreThan:function(n){return function($value){return $value>n}},
lessThan:function(n){return function($value){return $value<n}},
equalTo:function(n){return function($value){return $value==n}},
maxLength:function(n){return function($value){return !($value.length>n)}},
minLength:function(n){return function($value){return !($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>


以上rules中的验证为简易验证,大家可以自行更改扩展!

在线演示,请参见 http://www.v-ec.com/jslib【easy Validate】 部分!
...全文

相关推荐

评论 41
收藏 已收藏
分享
返回顶部
dh20156
JavaScript 87,983 成员 224,681 内容