隨筆-2 評(píng)論-0 文章-20 trackbacks-0

做網(wǎng)頁(yè)表單經(jīng)常要用到數(shù)據(jù)校驗(yàn)的功能.JavaScript校驗(yàn)是一種比較常用的手段。最近寫頁(yè)面寫得比較多，發(fā)現(xiàn)了一個(gè)比較好用的js校驗(yàn)框架--jQuery.validate。她是一款基于jquery的校驗(yàn)工具，基本可以滿足我們大多數(shù)的頁(yè)面校驗(yàn)需要，且支持ajax校驗(yàn)。支持各種自定義的擴(kuò)展，包括自定義校驗(yàn)規(guī)則，自定義錯(cuò)誤顯示的方式等。

        通過一段時(shí)間的使用，感覺用起來(lái)還是非常簡(jiǎn)單的。這里做一下使用方法的簡(jiǎn)單介紹，而后會(huì)介紹一個(gè)我自己擴(kuò)展的一種錯(cuò)誤提示方式（感覺默認(rèn)的信息提示的方式比較一般實(shí)在不怎么好看）。
        閑話少說，先說下用法：
        先導(dǎo)入必要的兩個(gè)js文件

XML/HTML代碼

另外還有一段css，用來(lái)突出顯示出錯(cuò)的表單控件和錯(cuò)誤信息的顯示樣式:

CSS代碼

input.error { border: 1px dotted red; }

label.error {

color: red;display: none;

}

         label.error 的display: none是為了讓我們可以在頁(yè)面上任意位置放置顯示錯(cuò)誤的label以及上面的內(nèi)容，并在沒有進(jìn)行校驗(yàn)時(shí)不顯示出來(lái)。
        需要的東西都齊了，我們可以為我們的表單元素添加校驗(yàn)了。添加校驗(yàn)的方法總的說有兩種：一種寫在控件的標(biāo)簽上；另一種寫在js腳本中。并且兩種方法可混合使用。
        第一種寫在標(biāo)簽中的如下：

XML/HTML代碼

class="required number" 表示必須字段且為數(shù)值型，max="10" 表示最大值為10。
另一種使用JavaScript腳本的寫法如下:

XML/HTML代碼

$('#test_form').validate({

rules:{

t2 : {required:true,number:true}

},

messages:{t2:{required :"這個(gè)字段你必須填~~！",number:"這個(gè)字段真可以是數(shù)字"}}

});

</script>

         其中test_form是表單form的id，t2是需要校驗(yàn)的控件的名字。rules后面的json描述的是校驗(yàn)規(guī)則，messages是自定義的錯(cuò)誤信息。順便說一句，有時(shí)候我們form中控件的name中是帶“.”的，比如：user.name,這時(shí)候用js腳本定義校驗(yàn)規(guī)則時(shí)，需要加上引號(hào)：”user.name”。
        這兩種寫法各有利弊，直接寫在控件標(biāo)簽上的比較簡(jiǎn)單直觀，相對(duì)來(lái)說js的寫法過于復(fù)雜，可靈活性更強(qiáng)。而且有時(shí)候我們可能沒機(jī)會(huì)在控件的標(biāo)簽上寫規(guī)則，假如我們用了標(biāo)簽庫(kù)，如struts標(biāo)簽庫(kù)，有些標(biāo)簽我們寫上max=“10”這樣的東西，標(biāo)簽庫(kù)將無(wú)法解析直接報(bào)錯(cuò)。總之，這兩種寫法jQuery.validate都認(rèn)識(shí)，我們?cè)诤线m的場(chǎng)景選擇合適的方式就可以了。
        另外，如果你想把規(guī)則寫在控件的標(biāo)簽上，僅僅寫上規(guī)則是不行的，還需要在頁(yè)面加載完的時(shí)候調(diào)用一下$('#test_form').validate();為form添加校驗(yàn)，這樣在你點(diǎn)提交按鈕的時(shí)候就會(huì)自動(dòng)校驗(yàn)了。
        說了這么多，該上個(gè)圖了，看看校驗(yàn)的效果：

成功了，校驗(yàn)的效果有了，表單也不會(huì)被提交。可能有的同學(xué)要說了，“要不要這么難看啊？”。這正是我下面要解決的問題。
我們來(lái)自定義一個(gè)錯(cuò)誤顯示的方式，效果如下：

錯(cuò)誤控件突出顯示的方式?jīng)]有改，為了兼容有些瀏覽器有些控件比如火狐中單選按鈕沒法標(biāo)注紅框的問題，在每個(gè)錯(cuò)誤的控件后面放了一個(gè)紅色的小叉號(hào)，另外當(dāng)鼠標(biāo)移動(dòng)到錯(cuò)誤控件或者小叉號(hào)上時(shí)顯示錯(cuò)誤的信息。
實(shí)現(xiàn)這個(gè)效果的主要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);

// 錯(cuò)誤信息div

var errdiv = $('div[htmlfor='+ elename + ']');

var errimg = $('img[htmlfor='+ elename + ']');

if(errdiv.length == 0){ // 沒有div則創(chuàng)建

// 純css不用圖片的圓角div，存在在IE6下顯示過長(zhǎng)的問題

// 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則創(chuàng)建

errimg = $('<img alt="錯(cuò)誤" 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 || "");

// 鼠標(biāo)放到圖片顯示錯(cuò)誤

$(errimg).hover(function(e){

$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 顯示在鼠標(biāo)位置偏移20的位置

$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeIn(200);

},

function(){

$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeOut(200);

});

// 鼠標(biāo)放到控件上顯示錯(cuò)誤

$(error.element).hover(function(e){

$('div[htmlfor="'+ t.idOrName(this) + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 顯示在鼠標(biāo)位置偏移20的位置

$('div[htmlfor="'+ t.idOrName(this) + '"]').fadeIn(200);

},

function(){

$('div[htmlfor="'+ t.idOrName(this) + '"]').fadeOut(200);

});

}

// 校驗(yàn)成功的去掉錯(cuò)誤提示

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.

}

});

// 本地語(yǔ)言

jQuery.extend(jQuery.validator.messages, {

required: "必選字段",

remote: "請(qǐng)修正該字段",

email: "請(qǐng)輸入正確格式的電子郵件",

url: "請(qǐng)輸入合法的網(wǎng)址",

date: "請(qǐng)輸入合法的日期",

dateISO: "請(qǐng)輸入合法的日期 (ISO).",

number: "請(qǐng)輸入合法的數(shù)字",

digits: "只能輸入整數(shù)",

creditcard: "請(qǐng)輸入合法的信用卡號(hào)",

equalTo: "請(qǐng)?jiān)俅屋斎胂嗤闹?/span>",

accept: "請(qǐng)輸入擁有合法后綴名的字符串",

maxlength: jQuery.validator.format("請(qǐng)輸入一個(gè)長(zhǎng)度最多是 {0} 的字符串"),

minlength: jQuery.validator.format("請(qǐng)輸入一個(gè)長(zhǎng)度最少是 {0} 的字符串"),

rangelength: jQuery.validator.format("請(qǐng)輸入一個(gè)長(zhǎng)度介于 {0} 和 {1} 之間的字符串"),

range: jQuery.validator.format("請(qǐng)輸入一個(gè)介于 {0} 和 {1} 之間的值"),

max: jQuery.validator.format("請(qǐng)輸入一個(gè)最大為 {0} 的值"),

min: jQuery.validator.format("請(qǐng)輸入一個(gè)最小為 {0} 的值")

});

自定義一個(gè)showErrors的方法，然后在為表單添加校驗(yàn)時(shí)，指定使用這個(gè)方法顯示錯(cuò)誤信息。

JavaScript代碼

$('#test_form').validate({

rules:{

t2 : {required:true,number:true}

},

messages:{t2:{required :"這個(gè)字段你必須填~~！",number:"這個(gè)字段真的可以是數(shù)字"}},

showErrors: showErrors //使用自定義的錯(cuò)誤顯示方法

});

這樣子我們想要的效果就實(shí)現(xiàn)了，是不是感覺比原來(lái)的樣子好多了呢？
jQuery.validate是一個(gè)非常靈活的JavaScript校驗(yàn)框架，上面只是介紹了一下基本的用法和自定義了一個(gè)錯(cuò)誤顯示的樣式。一般的表單校驗(yàn)基本可以搞定了，不過一些比較特殊，比如身份證號(hào)的校驗(yàn)，頁(yè)面上FCK編輯器的校驗(yàn)，還是需要我們自己來(lái)擴(kuò)展的。個(gè)人感覺這是個(gè)很不錯(cuò)的js校驗(yàn)框架，所以介紹給大家，希望有所幫助。

posted on 2011-07-27 16:28 soken 閱讀(8024) 評(píng)論(0) 編輯收藏所屬分類: javascript

<

2025年8月

>

日

一

二

三

四

五

六

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

常用鏈接

留言簿(2)

隨筆檔案

2011年7月 (1)

文章分類

文章檔案

相冊(cè)

MyPic

收藏夾

收藏鏈接

cas單點(diǎn)登錄完整教程
http://blogold.chinaunix.net/u/7893/article_34950.html

搜索

閱讀排行榜

1.?權(quán)限管理(565)

評(píng)論排行榜

1.?權(quán)限管理(0)

常用鏈接

留言簿(2)

隨筆檔案

文章分類

文章檔案

相冊(cè)

收藏夾

收藏鏈接

搜索

最新評(píng)論

閱讀排行榜

評(píng)論排行榜