Jquery Validate自定義驗證規則，一個漢字等於兩個字元長度

使用Jquery validate時寫的一些東西，在這裡做個筆記

在使用 Jquery validate 的minlength和maxlength進行文字框內容長度驗證的時候，對於一個漢字的長度檢測結果是1個字元長度，

在這裡我想讓一個漢字的長度為2個字元長度，下面記錄一下實現方法。

首先我們定義一個需求，比如下面文字框，我們想讓輸入的使用者名稱長度不能超過10個字元(一個漢字為兩個字元長度)。

使用者名稱：<input type="text" name="username" id="username ">
然後自定義校驗規則，程式碼如下：

/* 自定義驗證規則，內容的最大長度，一個漢字等於兩個字元 */
$.validator.addMethod("stringMaxLength",function(value,element,params){
    var length = value.length;
    for( var i = 0; i < value.length; i++ ) {
        if( value.charCodeAt(i) > 19967 ) {
            length++;
        }
    }
    return length>params[0]?false:true;
},"最大長度不能超過{0}個字元，一個漢字為兩個字元")

上面程式碼大體結構是這樣的：

$.validator.addMethod(rulesName,function,msg)

rulesName:規則的名稱，這裡是stringMaxLength（自己定義的）

function:是規則的具體實現函式，下面會具體介紹這個函式以及它的三個引數，這裡是function(value,element,params)

msg:該規則的校驗錯誤資訊，這裡是：“最大長度不能超過{0}個字元，一個漢字為兩個字元“,這個{0},是什麼意思呢？往下看。

function(value,element,params) { 
       //這裡寫校驗的具體實現
}

它有三個固定引數,value,element,params (固定引數，固定引數，固定引數，重要的事情說三遍！！！敲黑板了)

結合我們上面的需求，三個引數的含義如下：

value:是我們在文字框中輸入的內容，即校驗的目標

element:是校驗的元素，input這個元素，這裡用不到該元素的值（胸弟！忽略它）

params:校驗引數(我自己取得名字，哈哈……嗝，我沒有具體去查官方的稱

它是一個陣列，內容是我們設定校驗規則時傳入的引數，這裡我們應該傳入引數為10(內容最大長度為10)，所以params[0]就是10。

現在回答上面遺留的一問題，就是{0},他在這裡其實代表的就是params[0]，回答完畢。引數具體怎麼傳進來，下面就是了。

假設我們上面需求中的文字框所在的form表單的id為login, 檢驗的具體實現

$.validator.addMethod("stringMaxLength",function(value,element,params){
    var length = value.length;
    for( var i = 0; i < value.length; i++ ) {
        if( value.charCodeAt(i) > 19967 ) {
            length++;
        }
    }
    return length>params[0]?false:true;
},"最大長度不能超過{0}個字元，一個漢字為兩個字元")

怎麼判斷是漢字呢，我們是遍歷的value，value.charCodeAt(i)返回的是value中對應下標為i的字元的unicode編碼，

這個返回值是整數，它的範圍是0-65535(10進位制)，而漢字的unicode編碼的範圍是19968-40869(10進位制)。

所以根據這個範圍判斷如果是漢字，再在value.length的基礎上加1。

下面是使用這個驗證規則：

/* 定義表單驗證規則 */
$().ready(function(){
    $("#login").validate
        rules:{
            username:{
                stringMaxLength:["10"]            //引數必須這麼傳進去，如果想自定義它的校驗錯誤資訊，設定方法和其它規則一樣
            }
        }
    });
});