表单的js验证框架，只提供提示信息及正则表达式即可自动验证及提示

由于表单验证比较麻烦，所以写个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);});

其中id为文本框ID，regex为验证文本框的正则表达式，msg为输入错误时的提示信息；

如果需要特殊验证，使用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>

4.页面表单：

<form id="loginForm" name="loginForm" class="form-horizontal" action="${pageContext.request.contextPath }/admin/user_operate.htm" method="post">             <s:token />             <div class="control-group" style="margin-top: 15px;">                 <label  class="control-label">登录名称：</label>                 <div class="controls">                     <input type="text" onkeyup="valName()" name="user.userName" id="username" class="span6 typeahead">                 </div>             </div>             <div class="control-group">                 <label  class="control-label">登录密码：</label>                 <div class="controls">                     <input type="password" name="user.userPass" id="userpass" class="span6 typeahead">                 </div>             </div>             <div class="control-group">                 <label  class="control-label">确认密码：</label>                 <div class="controls">                     <input type="password" name="repassword" id="repassword" class="span6 typeahead">                 </div>             </div>             <div class="control-group">                 <label  class="control-label">联系电话：</label>                 <div class="controls">                     <input type="text" name="user.tel" id="tel" class="span6 typeahead">                 </div>             </div>             <div class="control-group">                 <label  class="control-label">备　　注：</label>                 <div class="controls">                     <input type="text" name="user.remark" id="remark" class="span6 typeahead" maxlength="25">                 </div>             </div>             <div class="control-group" style="text-align: left;">                 <button type="submit" style="margin-left: 170px;" id="btnlogin" class="btn btn-primary">确认添加</button>                 <button type="reset" class="btn btn-primary">重置</button>                 <s:fielderror /><s:actionerror/>             </div>         </form>