日期:2014-05-16 浏览次数:20374 次
由于表单验证比较麻烦,所以写个jquery框架进行表单的自动验证及提示,以减少工作量:
1.jquery框架源码:
/*! * jquery.ckFormValidate-1.0 * * Author: lifeng * Date: 2013-9-10 16:50:00 */ ; (function($) { $.fn.validateForm = function(validateRules, functions) { var el = this; $(validateRules).each(function(i, item) { var e = el.find("#" + item.id); var $span_2 = $("<span>").addClass("prompt").html(item.preMsg); e.after($span_2); var $span_1 = $("<span>").addClass("mark"); e.after($span_1); // 注册验证相关的事件,keyup(自动根据正则去验证) if (item.regex) { e.bind("keyup", function(event) { if (event.which == 9) return false; var result = validate(e, item.regex); error(e, result,item.msg); return false; }); } // 无法通过正则表达式验证 if (item.fun) { e.bind("keyup", function(event) { if (event.which == 9) return false; var result = item.fun(); error(e, result,item.msg); return false; }); } }); // 注册提交按钮事件 el.bind("submit", function() { var isvalid = true; $(validateRules).each(function(i, item) { var e = el.find("#" + item.id); if (item.regex) { var result = validate(e, item.regex); error(e, result,item.msg); isvalid = isvalid & result; } // 无法通过正则表达式验证 if (item.fun) { var result = item.fun(); error(e, result,item.msg); isvalid = isvalid & result; } }); return isvalid ? true : false; }); }; function validate($obj, reg) { var val = $obj.val(); // 进行正则表达式验证 var regex = new RegExp(reg); return regex.test(val); } function error($obj, result,msg) { if (!result) { $obj.addClass("error"); $obj.nextAll("span.prompt").css({ "color" : "#ff0000" }).html(msg); } else { $obj.removeClass("error"); $obj.nextAll("span.prompt").css({ "color" : "none" }).html("<img src='../img/ok_ico.png'/>"); } } })(jQuery);2.js书写格式:
//验证规则: var validateRules=[ {"id":"username","regex":"^[a-z]{4,20}$","msg":"用户名只能是a-z当中的字符,至少4位"}, {"id":"userpass","regex":"^[a-zA-Z0-9]{4,20}$","msg":"密码只能是英文或数字,至少4位"}, {"id":"repassword","msg":"两次密码不一致","fun":validateRepassword}, {"id":"tel","regex":"(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^((\([0-9]{3}\))|([0-9]{3}\-))?(1[358][0-9]{9})$)","msg":"请输入正确的联系电话!座机格式:0931-8440845"} ]; //无法通过正则表达式验证的逻辑判断,需要单独提供一个js判断方法,这个方法需要传入在验证规则 //该方法要求返回值必须是true,false; function validateRepassword(){ if($("#repassword").val()=="") return false; if($("#repassword").val()!=$("#userpass").val()) return false; return true; } $(function(){ $("#loginForm").validateForm(validateRules); });
如果需要特殊验证,使用fun,参数为调用的方法;
3.页面导入:
<script src="${pageContext.request.contextPath }/js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script> <script src="${pageContext.request.contextPath }/js/jquery.ckFormValidate-1.0.js" type="text/javascript" charset="utf-8"></script> <script src="${pageContext.request.contextPath }/admin/user/js/user.js" type="text/javascript" charset="utf-8"></script>
<form id="log