文章出處

返回目錄

為什么要對minLength和maxLength這兩個方法進行擴展呢,是因為這樣一個需求,在用戶注冊時,可以由用戶自己決定他們輸入的字符,中文,英文,數字均可,這樣做了之后,使用戶的體驗更好,但對于程序來說就有些麻煩了,因為

我們的Length方法只針對英文字符和數字而言的

原因1:事實上,真實的數據存儲里,中文和全角他們占用的是兩個字符的空間,所以,我們在驗證中文時,應該考慮到這點.

原因2:不說計算機基礎知識,但說現實世界里,如果你的用戶名由4~10位組成,那么,如果你用Length方法,那基本上對中文的名稱被90%的拒絕了,因為只有小部分中國文會起四個字的名字,呵呵.

說干就干:

從網站上搜索了一下,找到了一個不錯的JS方法,用來驗證中文和英文字母的長度,原代碼

    /**
    * 字符串長度-中文和全角符號為2，英文、數字和半角為1
    * @param str
    * @return {Number}
    */
    var getLength = function (str) {
        return Math.ceil(str.replace(/^\s+|\s+$/ig, '').replace(/[^\x00-\xff]/ig, 'xx').length);
    };
    /**
    * 按字數截取字符串
    * @param str
    * @param len
    * @return {*}
    */
    var subStr = function (str, len) {
        if (!str) {
            return '';
        }
        len = len > 0 ? len * 2 : 280;
        var count = 0, //計數：中文2字節，英文1字節
            temp = '';  //臨時字符串
        for (var i = 0; i < str.length; i++) {
            if (str.charCodeAt(i) > 255) {
                count += 2;
            }
            else {
                count++;
            }
            //如果增加計數后長度大于限定長度，就直接返回臨時字符串
            if (count > len) {
                return temp;
            }
            //將當前內容加到臨時字符串
            temp += str.charAt(i);
        }
        return str;
    };
    var checkStrLength = function (str, minL, maxL) {
        var len = getLength($.trim(str));
        var data = {
            'checkL': (len >= minL && len <= maxL),
            'restL': maxL - len,
            'restStr': subStr(str, maxL)
        };
        return data;
    };

我們將它與ko.validation架構進行結合,但它在ko中去呈現

    /*擴展的字符長度驗證,支持中文占兩個字符的空間*/
    kv.rules['extMinLength'] = {
        validator: function (val, minLength) {
            if (!kv.utils.isEmptyVal(val)) {
                console.log(getLength(val));
                console.log(minLength);
            }
            return kv.utils.isEmptyVal(val) || getLength(val) >= minLength;
        },
        message: 'Please enter at least {0} characters.(extension validator for zzl)'
    };

    kv.rules['extMaxLength'] = {
        validator: function (val, maxLength) {
            return kv.utils.isEmptyVal(val) || getLength(val) <= maxLength;
        },
        message: 'Please enter no more than {0} characters.(extension validator for zzl)'
    };

下面我們看一下如何去調用它

   self.extName = ko.observable().extend({
                extMinLength: 4,
                extMaxLength: { params: 20, message: "名字太長了" },
     });

看一下運行的結果

返回目錄


文章列表



Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()