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"]            //參數必須這么傳進去，如果想自定義它的校驗錯誤信息，設置方法和其它規則一樣
            }
        }
    });
});

 

以上僅供參考，希望對您有所幫助。