MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength

返回目录

为什么要对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: "名字太长了" },});

看一下运行的结果

返回目录

MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength相关推荐

MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
说在前有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码 ...
MVVM架构~knockoutjs系列之验证成功提示显示
对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.isValid ...
MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定
Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去探讨它, ...
MVVM架构~knockoutjs系列之验证信息自定义输出~再续
返回目录对于一个项目的表单验证,方式有很多,效果也有很多,具体使用哪种完成取决于产品这边,产品让你用什么,你就要用什么,而做为开发人员,我们要做的就是＂整理近可能多的架构方式＂,这样才可以自由的应变 ...
MVVM架构~knockoutjs系列之验证信息自定义输出~续
返回目录上一讲中,我以一个实际中的例子说明了knockoutjs的自定义验证功能,在使用过程中,出现了一个问题,当然了不是问题,只是一种需求,上一讲中自定义验证的表现是:当页面加载后,自动显示有问题 ...
MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等
返回目录在看这篇文章之前,你有必要先看我之前的文章,之前文章是将一个方法以参数的形式传给KO,然后返回一个真假值,去做验证,这类似于面向对象语言里的委托,在JS里我们叫它回调方法,本篇文章与前一文章 ...
MVVM架构~knockoutjs系列之包括区域级联列表的增删改
返回目录这个例子我做了几次,之前总是有BUG,目前测试后,确定没有BUG才发上来的,主要功能是实现"我的银行"模块的增删改的功能,这个里面包括了级联列表的区域选择,这部分是难点, ...
MVVM架构~knockoutjs实现简单的购物车
返回目录概念相关购物车相信大家都用过,很方便,可以将多个商品添加到购物车,并且可以修改购买商品的数据,当然为了用户体验好,在修改数据时,你的价格也会出现变化的,这使用JS可以实现,但我认为,代码量 ...
深入解析MVVM架构
mvvm 前言我想做Android开发的大佬都用过MVP,在谷歌没有提出MVVM这种架构模式的时候,大多数开发者都是从传统的MVC过度到MVP的,的确MVP相对MVC来说的确有了很大的改进,具体改进 ...

MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength

MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength相关推荐

最新文章

热门文章