中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

MVVM架構~knockoutjs系列之為validation.js擴展(zhan)minLength和maxLength

返回目錄

為(wei)什(shen)么要對minLength和maxLength這兩個方法進(jin)行(xing)擴展(zhan)呢,是因為(wei)這樣一(yi)個需求,在用戶(hu)注冊時,可以由用戶(hu)自己決定他們輸入的(de)字(zi)符(fu),中(zhong)文(wen),英文(wen),數字(zi)均(jun)可,這樣做(zuo)了之后,使(shi)用戶(hu)的(de)體驗更好,但對于程序來說(shuo)就有(you)些麻煩了,因為(wei)

我們的Length方(fang)法只(zhi)針對英文字(zi)(zi)符和數字(zi)(zi)而言的

原因(yin)1:事實上,真實的(de)數據存儲(chu)里,中文和(he)全角(jiao)他們占用的(de)是(shi)兩個字(zi)符(fu)的(de)空間,所(suo)以,我們在驗證中文時,應該考慮(lv)到(dao)這點.

原因2:不說計(ji)算機(ji)基礎知識,但說現實世界(jie)里,如果(guo)(guo)你的(de)用(yong)戶名(ming)由4~10位組成,那(nei)么,如果(guo)(guo)你用(yong)Length方法,那(nei)基本(ben)上對中(zhong)文(wen)的(de)名(ming)稱被90%的(de)拒絕了(le),因為(wei)只(zhi)有小部分中(zhong)國文(wen)會起四個字(zi)(zi)的(de)名(ming)字(zi)(zi),呵(he)呵(he).

說干就干:

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

    /**
    * 字(zi)符串長度-中文和(he)全角(jiao)符號(hao)為2,英文、數字(zi)和(he)半角(jiao)為1
    * @param str
    * @return {Number}
    */
    var getLength = function (str) {
        return Math.ceil(str.replace(/^\s+|\s+$/ig, '').replace(/[^\x00-\xff]/ig, 'xx').length);
    };
    /**
    * 按字(zi)數截取(qu)字(zi)符串
    * @param str
    * @param len
    * @return {*}
    */
    var subStr = function (str, len) {
        if (!str) {
            return '';
        }
        len = len > 0 ? len * 2 : 280;
        var count = 0, //計(ji)數:中文2字節(jie),英文1字節(jie)
            temp = '';  //臨時字符串
        for (var i = 0; i < str.length; i++) {
            if (str.charCodeAt(i) > 255) {
                count += 2;
            }
            else {
                count++;
            }
            //如果增(zeng)加計數(shu)后長度大(da)于限定長度,就直接返回臨時字符串
            if (count > len) {
                return temp;
            }
            //將當前內容加(jia)到臨時字符(fu)串
            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;
    };

我(wo)們將(jiang)它(ta)與(yu)ko.validation架構進(jin)行(xing)結合,但它(ta)在ko中去呈現

    /*擴展的字符長度(du)驗證,支持中文占兩個字符的空間*/
    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)'
    };

下(xia)面我(wo)們看一下(xia)如何去調用(yong)它

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

看一下運行的結果

返回目錄

posted @ 2014-05-20 14:58  張占嶺  閱讀(3664)  評論(1)    收藏  舉報