基于jQuery的简单验证插件(开发点滴)
2016-03-22 10:03
781 查看
自己写的很简单很轻量的前台表单验证插件。
直接上代码:
使用示例:
可在defCheck对象中添加属性来扩展内置验证方法
遗留问题:暂时还无法将验证和业务完全剥离
直接上代码:
(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对象中添加属性来扩展内置验证方法
遗留问题:暂时还无法将验证和业务完全剥离
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- javascript实现10进制转为N进制数
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- java自动生成验证码插件-kaptcha
- 最后一次说说闭包
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究