Jquery Validate自定义验证规则，一个汉字等于两个字符长度

浅浅的花香味﹌ 2021-06-26 16:06 479阅读 0赞

使用`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"]            //参数必须这么传进去，如果想自定义它的校验错误信息，设置方法和其它规则一样
                }
            }
        });
    });