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