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


    使用Jquery validate时写的一些东西,在这里做个笔记

    在使用 Jquery validate 的minlength和maxlength进行文本框内容长度验证的时候,对于一个汉字的长度检测结果是1个字符长度,

    在这里我想让一个汉字的长度为2个字符长度,下面记录一下实现方法。

    首先我们定义一个需求,比如下面文本框,我们想让输入的用户名长度不能超过10个字符(一个汉字为两个字符长度)。

    用户名:<input type="text" name="username" id="username ">

    然后自定义校验规则,代码如下:

     1 /* 自定义验证规则,内容的最大长度,一个汉字等于两个字符 */
     2 $.validator.addMethod("stringMaxLength",function(value,element,params){
     3     var length = value.length;
     4     for( var i = 0; i < value.length; i++ ) {
     5         if( value.charCodeAt(i) > 19967 ) {
     6             length++;
     7         }
     8     }
     9     return length>params[0]?false:true;
    10 },"最大长度不能超过{0}个字符,一个汉字为两个字符")

    上面代码大体结构是这样的:

    $.validator.addMethod(rulesName,function,msg)

    rulesName:规则的名称,这里是stringMaxLength(自己定义的)

    function:是规则的具体实现函数,下面会具体介绍这个函数以及它的三个参数,这里是function(value,element,params)

    msg:该规则的校验错误信息,这里是:“最大长度不能超过{0}个字符,一个汉字为两个字符“,这个{0},是什么意思呢?往下看。

    1 function(value,element,params) { 
    2        //这里写校验的具体实现
    4 }

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

    以上仅供参考,希望对您有所帮助。

  • 相关阅读:
    洛谷.1110.[ZJOI2007]报表统计(Multiset Heap)
    洛谷.1110.[ZJOI2007]报表统计(Multiset)
    洛谷.3809.[模板]后缀排序(后缀数组 倍增) & 学习笔记
    洛谷.2801.教主的魔法(分块 二分)
    洛谷.2709.小B的询问(莫队)
    COGS.1901.[模板][国家集训队2011]数颜色(带修改莫队)
    COGS.1822.[AHOI2013]作业(莫队 树状数组/分块)
    COGS.1689.[HNOI2010]Bounce 弹飞绵羊(分块)
    COGS.264.数列操作(分块 单点加 区间求和)
    COGS.1317.数列操作c(分块 区间加 区间求和)
  • 原文地址:https://www.cnblogs.com/caizhen/p/9130584.html
Copyright © 2020-2023  润新知