您的位置:首页 > Web前端 > JQuery

基于jQuery的简单验证插件(开发点滴)

2016-03-22 10:03 781 查看
自己写的很简单很轻量的前台表单验证插件。

直接上代码:

(function($){
var defCheck = {
"notnull": function(element){
return element && true;
},
"ip": function(element){
var re = /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/;
return element && re.test(element);
}
}
$.extend({
validation: function(param){

var elements;
var checkArr = [];
param && param instanceof Array ? elements = param : elements = [];
for(var i=0;i<elements.length;i++){
var item = elements[i];
var element = item.element;
var check, error;
if(item.check && item.check instanceof Array){
checkArr = [];
$(item.check).each(function(cIndex,cItem){
checkArr.push(checkFunc(cItem, element));
});
} else {
checkArr = [];
checkArr.push(checkFunc(item.check, element));
}
if(item.error && typeof item.error == "function"){
error = item.error;
}else if(item.error && typeof item.error == "string"){
error = function(){ $L.opmessage(item.error); }
}
for(var j=0;j<checkArr.length;j++){
if(!checkArr[j]){
error();
return false;
}
}
}
return true;
}
});
var checkFunc = function(itemCheck,element){
if(itemCheck && typeof itemCheck == "function"){
return itemCheck(element);
} else if(itemCheck && typeof itemCheck == "string" && defCheck[itemCheck]){
return defCheck[itemCheck](element);
}
}
})(jQuery);


使用示例:

/** 示例
* $.validation([      需要验证的页面元素集合
*         {
*              element: $("#element1").val(),      需验证的内容
*              check: function(element){},         自定义验证方法,返回假 调用error
*              error: function(){},            自定义验证失败处理方法
*         },
*         {
*              element: $("#element2").attr("title"),
*              check: "notnull",                   内置验证方法
*              error: "用户名不能为空"                默认使用$L.opmessage()输出错误信息
*         },
*         {
*              element: $("#element2").attr("title"),
*              check: ["notnull","ip",function(element){}],            支持多验证
*              error: "用户名不能为空"                默认使用$L.opmessage()输出错误信息
*         }
*        ])
*
* */


可在defCheck对象中添加属性来扩展内置验证方法

遗留问题:暂时还无法将验证和业务完全剥离
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript jquery 插件