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: "名字太長了" }, });
看一下運行的結果
