自己写的很简单很轻量的前台表单验证插件。
直接上代码:
(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对象中添加属性来扩展内置验证方法
遗留问题:暂时还无法将验证和业务完全剥离