关于Jquery的Validate插件--rules添加自定义方法(强密码验证方法)

简介:请看菜鸟教程,根据给出的方法,自定义识别密码是否为复杂密码的方法

链接: https://www.runoob.com/jquery/jquery-plugin-validate.html

Query Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现,并一直更新至今。目前版本是 1.14.0。

访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件。

菜鸟教程提供的 1.14.0 版本下载地址:http://static.runoob.com/download/jquery-validation-1.14.0.zip

自定义方法

javascript 复制代码
<script type="text/javascript">
		//自定义pwdMatch方法
		$.validator.addMethod("pwdMatch",function(value,element,params){
		//强密码正则表达式-大小写字母、数字、符号三种类型组合的密码,长度至少为8位
			var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
			if(strongRegex.test(value)) {
				return true;
			}else {
				return false;
			}
		},"请使用大小写字母、数字、符号三种类型组合的密码,长度至少为8位。");
		$(document).ready(function() {
			$("#submitForm").validate({
				rules: {
					//这里添加方法使用规则,即应用上面自定义的密码规则方法
					newPassword:{pwdMatch:[]},
					confirmNewPassword:{pwdMatch:[]}
				},
				//提交的方法要在这重新写
				submitHandler: function(form){
					loading('正在提交,请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
			});
		});
	</script>

原文如下

addMethod(name,method,message)方法

参数 name 是添加的方法的名字。

参数 method 是一个函数,接收三个参数 (value,element,param) 。

value 是元素的值,element 是元素本身,param 是参数。

我们可以用 addMethod 来添加除内置的 Validation 方法之外的验证方法。比如有一个字段,只能输一个字母,范围是 a-f,写法如下:

$.validator.addMethod("af",function(value,element,params){  
    if(value.length>1){
        return false;
    }
    if(value>=params[0] && value<=params[1]){
        return true;
    }else{
        return false;
    }
},"必须是一个字母,且a-f");
如果有个表单字段的 name="username",则在 rules 中写:
username:{
   af:["a","f"]
}

addMethod 的第一个参数,是添加的验证方法的名字,这时是 af。

addMethod 的第三个参数,是自定义的错误提示,这里的提示为:"必须是一个字母,且a-f"。

addMethod 的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法。

如果只有一个参数,直接写,比如 af:"a",那么 a 就是这个唯一的参数,如果多个参数,则写在 [] 里,用逗号分开。

相关推荐
高山我梦口香糖4 分钟前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235246 分钟前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240251 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar1 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人2 小时前
前端知识补充—CSS
前端·css
GISer_Jing2 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245522 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v2 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing2 小时前
开源白板新方案:Plait 同时支持 Angular 和 React 啦!
前端·开源·github
2401_857600952 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js