由於表單驗證比較麻煩,所以寫個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>