做網頁表單經常要用到數據校驗的功能.JavaScript校驗是一種比較常用的手段。最近寫頁面寫得比較多，發現了一個比較好用的js校驗框架--jQuery.validate。她是一款基于jquery的校驗工具，基本可以滿足我們大多數的頁面校驗需要，且支持ajax校驗。支持各種自定義的擴展，包括自定義校驗規則，自定義錯誤顯示的方式等。
通過一段時間的使用，感覺用起來還是非常簡單的。這里做一下使用方法的簡單介紹，而后會介紹一個我自己擴展的一種錯誤提示方式（感覺默認的信息提示的方式比較一般實在不怎么好看）。
閑話少說，先說下用法：
先導入必要的兩個js文件
XML/HTML代碼
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.validate.js"></script>
另外還有一段css，用來突出顯示出錯的表單控件和錯誤信息的顯示樣式:
CSS代碼
input.error { border: 1px dotted red; }
label.error {
color: red;display: none;
}
label.error 的display: none是為了讓我們可以在頁面上任意位置放置顯示錯誤的label以及上面的內容，并在沒有進行校驗時不顯示出來。
需要的東西都齊了，我們可以為我們的表單元素添加校驗了。添加校驗的方法總的說有兩種：一種寫在控件的標簽上；另一種寫在js腳本中。并且兩種方法可混合使用。
第一種寫在標簽中的如下：
XML/HTML代碼
<input type="text" class="required number" max="10" name="t1">
class="required number" 表示必須字段且為數值型，max="10" 表示最大值為10。
另一種使用JavaScript腳本的寫法如下:
XML/HTML代碼
<script type="text/javascript">
$('#test_form').validate({
rules:{
t2 : {required:true,number:true}
},
messages:{t2:{required :"這個字段你必須填~~！",number:"這個字段真可以是數字"}}
});
</script>
其中test_form是表單form的id，t2是需要校驗的控件的名字。rules后面的json描述的是校驗規則，messages是自定義的錯誤信息。順便說一句，有時候我們form中控件的name中是帶“.”的，比如：user.name,這時候用js腳本定義校驗規則時，需要加上引號：”user.name”。
這兩種寫法各有利弊，直接寫在控件標簽上的比較簡單直觀，相對來說js的寫法過于復雜，可靈活性更強。而且有時候我們可能沒機會在控件的標簽上寫規則，假如我們用了標簽庫，如struts標簽庫，有些標簽我們寫上max=“10”這樣的東西，標簽庫將無法解析直接報錯。總之，這兩種寫法jQuery.validate都認識，我們在合適的場景選擇合適的方式就可以了。
另外，如果你想把規則寫在控件的標簽上，僅僅寫上規則是不行的，還需要在頁面加載完的時候調用一下$('#test_form').validate();為form添加校驗，這樣在你點提交按鈕的時候就會自動校驗了。
說了這么多，該上個圖了，看看校驗的效果：
成功了，校驗的效果有了，表單也不會被提交。可能有的同學要說了，“要不要這么難看啊？”。這正是我下面要解決的問題。
我們來自定義一個錯誤顯示的方式，效果如下：
錯誤控件突出顯示的方式沒有改，為了兼容有些瀏覽器有些控件比如火狐中單選按鈕沒法標注紅框的問題，在每個錯誤的控件后面放了一個紅色的小叉號，另外當鼠標移動到錯誤控件或者小叉號上時顯示錯誤的信息。
實現這個效果的主要js代碼如下：
JavaScript代碼
function showErrors(){
var t = this;
for ( var i = 0; this.errorList[i]; i++ ) {
var error = this.errorList[i];
this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
var elename = this.idOrName(error.element);
// 錯誤信息div
var errdiv = $('div[htmlfor='+ elename + ']');
var errimg = $('img[htmlfor='+ elename + ']');
if(errdiv.length == 0){ // 沒有div則創建
// 純css不用圖片的圓角div，存在在IE6下顯示過長的問題
// errdiv = $('<div>'
// + '<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>'
// + '<span class="errmsg"> </span>'
// + '<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> '
// + '</div> ');
// 帶圖片的圓角div在所有瀏覽器兼容
errdiv = $('<div>'
+ '<img src="img/left_icon.gif" width="6" height="24" align="absmiddle" class="fl" />'
+ '<div class="errmsgdiv fl errmsg"></div>'
+ '<img src="img/right_icon.gif" width="6" height="24" align="absmiddle" class="fl" />'
+ '</div>');
errdiv.attr({"for": this.idOrName(error.element), generated: true})
.addClass(this.settings.errorClass);
// errdiv.css({left : $.getLeft(error.element) + 'px',top : $.getTop(error.element) + 'px'}); // 顯示在控件的下面
errdiv.appendTo($('body'));
}
if(errimg.length == 0){ // 沒有img則創建
errimg = $('<img alt="錯誤" src="img/unchecked.gif">')
errimg.attr({"for": this.idOrName(error.element), generated: true});
errimg.insertAfter(error.element);
}
errimg.show();
errdiv.find(".errmsg").html(error.message || "");
// 鼠標放到圖片顯示錯誤
$(errimg).hover(function(e){
$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 顯示在鼠標位置偏移20的位置
$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeIn(200);
},
function(){
$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeOut(200);
});
// 鼠標放到控件上顯示錯誤
$(error.element).hover(function(e){
$('div[htmlfor="'+ t.idOrName(this) + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 顯示在鼠標位置偏移20的位置
$('div[htmlfor="'+ t.idOrName(this) + '"]').fadeIn(200);
},
function(){
$('div[htmlfor="'+ t.idOrName(this) + '"]').fadeOut(200);
});
}
// 校驗成功的去掉錯誤提示
for ( var i = 0; this.successList[i]; i++ ) {
$('div[htmlfor="'+ this.idOrName(this.successList[i]) + '"]').remove();
$('img[htmlfor='+ this.idOrName(this.successList[i]) + ']').hide();
}
// 自定義高亮
if (this.settings.unhighlight) {
for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
}
}
}
$.extend({
getLeft : function(object) {
var go = object;
var oParent, oLeft = go.offsetLeft;
while (go.offsetParent != null) {
oParent = go.offsetParent;
oLeft += oParent.offsetLeft;
go = oParent;
}
return oLeft;
},
getTop : function(object) {
var go = object;
var goHeight = go.height;
var oParent, oTop = go.offsetTop;
while (go.offsetParent != null) {
oParent = go.offsetParent;
oTop += oParent.offsetTop;
go = oParent;
}
return oTop + 22;// 之所以加22不加控件高度,為了兼容ie6.
}
});
// 本地語言
jQuery.extend(jQuery.validator.messages, {
required: "必選字段",
remote: "請修正該字段",
email: "請輸入正確格式的電子郵件",
url: "請輸入合法的網址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入合法的數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入擁有合法后綴名的字符串",
maxlength: jQuery.validator.format("請輸入一個長度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("請輸入一個長度介于 {0} 和 {1} 之間的字符串"),
range: jQuery.validator.format("請輸入一個介于 {0} 和 {1} 之間的值"),
max: jQuery.validator.format("請輸入一個最大為 {0} 的值"),
min: jQuery.validator.format("請輸入一個最小為 {0} 的值")
});
自定義一個showErrors的方法，然后在為表單添加校驗時，指定使用這個方法顯示錯誤信息。
JavaScript代碼
$('#test_form').validate({
rules:{
t2 : {required:true,number:true}
},
messages:{t2:{required :"這個字段你必須填~~！",number:"這個字段真的可以是數字"}},
showErrors: showErrors //使用自定義的錯誤顯示方法
});
這樣子我們想要的效果就實現了，是不是感覺比原來的樣子好多了呢？
jQuery.validate是一個非常靈活的JavaScript校驗框架，上面只是介紹了一下基本的用法和自定義了一個錯誤顯示的樣式。一般的表單校驗基本可以搞定了，不過一些比較特殊，比如身份證號的校驗，頁面上FCK編輯器的校驗，還是需要我們自己來擴展的。個人感覺這是個很不錯的js校驗框架，所以介紹給大家，希望有所幫助。
posted on 2011-07-27 16:28
soken 閱讀(8019)
評論(0) 編輯 收藏 所屬分類:
javascript