jQuery Validate自定义验证方法实现方式

$( '#userForm' ).validate({
	rules:{
		truename:{
			required:true,
			minlength:2,
			maxlength:6,
			<span style="color:#FF0000;"><strong>isChar</strong></span>:true,
		},
		email:{
			required:true,
			email:true,
		},
		province:{
			required:true,
		},
		city:{
			required:true,
		},
		area:{
			required:true,
		},
	},
	messages:{
		truename:{
			required:'请输入您的姓名',
			minlength:'姓名项只允许2~6个字符',
			maxlength:'姓名项只允许2~6个字符',
			isChar:'请正确格式的姓名(暂支持汉字)',
		},
		email:{
			required:'请输入邮箱地址',
			email:'请检查您输入的邮箱',
		},
		province:{
			required:'请选择您所在的省'
		},
		city:{
			required:'请选择您所在的市'
		},
		area:{
			required:'请选择您所在的区'
		},
	},
});

对应调用函数: ( 可以在内部写js/或者外部引入-我是外部引入的文件 )  validate.expand.js

// JavaScript Document

//检测手机号是否正确
jQuery.validator.addMethod("<strong>isMobile</strong>", function(value, element) {
	var length = value.length;
	var regPhone = /^1([3578]\d|4[57])\d{8}$/;
    return this.optional(element) || ( length == 11 && regPhone.test( value ) );  
}, "请正确填写您的手机号码"); 

//检测用户姓名是否为汉字
jQuery.validator.addMethod("<span style="color:#FF0000;"><strong>isChar</strong></span>", function(value, element) {
	var length = value.length;
	var regName = /[^\u4e00-\u9fa5]/g;
    return this.optional(element) || !regName.test( value );  
}, "请正确格式的姓名(暂支持汉字)");

//檢測邮政编码
jQuery.validator.addMethod("<strong>isZipCode</strong>", function(value, element) {  
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

这边的最后一个参数是返回的message在上面的$( '#xxx' ).validate({}) 里面的message对应位置可以重置


  • 12
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
可以使用 jQuery Validate 插件的 `addMethod` 方法自定义验证规则,并使用隐藏的 input 元素来进行验证。 具体实现步骤如下: 1. 在 HTML 文件中添加一个隐藏的 input 元素,并设置它的 `name` 属性和验证规则。 ```html <input type="hidden" name="customButton" class="custom-button-validate" required> ``` 在上述代码中,`name` 属性设置为 `customButton`,并添加了 `required` 规则。同时,通过 `class` 属性添加了一个自定义的类名 `custom-button-validate`,以便在 JavaScript 文件中进行操作。 2. 在 JavaScript 文件中,使用 `addMethod` 方法自定义验证规则。 ```javascript $.validator.addMethod("customButton", function(value, element) { // 在这里编写自定义验证规则的逻辑 // 如果验证通过,返回 true,否则返回 false return true; }, "自定义验证失败提示信息"); ``` 在上述代码中,`addMethod` 方法接受三个参数,分别为自定义验证方法的名称、验证函数和验证失败时的提示信息。在验证函数中,可以编写自定义验证规则逻辑,并根据验证结果返回 `true` 或 `false`。 3. 在 jQuery Validate 插件的 `submitHandler` 方法中,手动触发验证。 ```javascript $("#form").validate({ submitHandler: function(form) { // 验证通过后的处理逻辑 // 在这里手动触发自定义验证规则 $(".custom-button-validate").valid(); } }); ``` 在上述代码中,`submitHandler` 方法在表单验证通过后被触发。在这个方法中,可以编写表单验证通过后的处理逻辑,并手动触发隐藏的 input 元素的验证,以便触发自定义验证规则。 通过上述步骤,可以实现jQuery Validate 插件中使用隐藏的 input 元素来自定义按钮验证。需要注意的是,在验证函数中,需要编写自定义验证规则逻辑,并根据验证结果返回 `true` 或 `false`。同时,需要在 `submitHandler` 方法中手动触发隐藏的 input 元素的验证,以便触发自定义验证规则。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值