jQuery.validator.addMethod("byteMaxLength", function(value, element, param) { var length = value.length; for ( var i = 0; i < value.length; i++) { if (value.charCodeAt(i) > 127) { length++; } } return this.optional(element) || (length <= param); }, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));
jQuery.validator.addMethod() 方法,有三个参数,
第一个参数 : “byteMaxLength” 是定义方法名,必须保证方法名唯一,是一个identifier标志。
第二个参数: 是下面这个回调(callback)函数:
function(value, element, param) { var length = value.length; for ( var i = 0; i < value.length; i++) { if (value.charCodeAt(i) > 127) { length++; } } return this.optional(element) || (length <= param); }
回调函数有三个参数:
第一个:value ,是当前验证的元素的值。
第二个: element 是当前被验证的元素。
第三个:是传入的参数,例如: min : 5 这个参数为5, 对于本方法调用的时候,例如:byteMaxLength:10 其中10为传入参数。
这个方法的方法名为: byteMaxLength 回调函数如上,
回调函数的作用就是验证输入的为多少个字节,其中一个汉字代表两个字符,字符为0-127的ASCII码,其中有一句返回:
return this.optional(element) 这个函数调用的意思是: 用于表单输入值不为空时验证,当field为空时,即element的值为空,this.optional(element) = true, 就是说该filed不是必填项,当不填时也通过验证, 如果element的值不为空 this.optional(element) = false 就要根据 || 后面的验证来判断返回为true 或false的目的,总结起来 this.optional(element) 就是为了说明 当前验证的 field不是必填项。
第三个参数: 如下:
复制代码 代码如下:
$.validator.format("不能超过{0}个字节(一个中文字算2个字节)")
这第三个参数可以直接是一个message 就是验证的提示信息, 为了显示函数的验证的信息,这个参数也可以通过创建函数jQuery.validator.format(value)来显示,其中 {0} 代表 该方法 的参数如果 方法调用如: byteMaxLength : 10 上面的输入就是 不能超过10个字节,(一个中文字算两个字节)
下面看一下这段代码:
$( "#frm" ).validate({ rules: { username: { required: true, minlength: 4, maxlength: 20, byteMaxLength:20, valiEnglish:true }, postcode: { postcodeVal:true }, number: { byteMaxLength:5, numFormat:5 }, identifier: { sfzhValidate:true } }, messages: { username: { required: "请输入用户名4--20个英文字符", minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!") }, number: { numFormat: $.format("请输入{0}数字") } } });
首先这是一个方法调用
复制代码 代码如下:
$( "#frm" ).validate([options])
验证选择的表单,方法的参数是可选项,可以输入0个或者键值对(key/value)
这个方法是为了 处理例如:submit , focus , keyup , blur, click 触发验证的,对象是整个表单的元素,或者是单个元素,使用rules和 messages 定义验证的元素,使用errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, and ignoreTitle去控制非法元素的错误信息显示。
下面看 validate 的方法 rules();
返回 第一个选择的元素的验证的规则, 有若干种方式定义验证规则。
rules 方法定义了基于id的验证,
复制代码 代码如下:
username: {
required: true,
minlength: 4,
maxlength: 20,
byteMaxLength:20,
valiEnglish:true
}
如上:其中,username为 id名, {}中为定义的验证方法,就是这个id 的都需要哪些方法验证,方法名就是上面讲到的方法;
这样就定义了。
messages中定义了 :
复制代码 代码如下: