validate实现表单验证_validateform表单验证-优快云博客

本文链接：https://blog.youkuaiyun.com/moxiaomo0804/article/details/90730764

本文详细介绍了jQuery validate插件的使用方法，包括如何导入库、选择表单、编写校验规则及自定义提示信息。并通过实例展示了必填、长度、数字、密码匹配和日期等常见验证规则的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简介

二、使用方法

1、导库

2、通过jqrery的选择器找到要验证的表单

一、简介

validate是一款优秀的表单验证插件，内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则自定义验证规则：可以很方便的自定义验证规则简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。

二、使用方法

1、导库

导入jquery.js，导入validate.js

2、通过jqrery的选择器找到要验证的表单

3、在validate中编写校验规则

$("选择器").validate({
    rules:{},
    messages:{}
});

这里rules的{} 里写的就是具体的规范，要做什么约束；messages的{}里写的就是违背给出的提示信息

rules{}内的格式:

格式1:字段的name属性:"校验器"
格式2: 字段的name属性:{校验器:值,校验器:值}

其中：格式1是一个输入框只有一个校验器的时候使用而格式2是一个输入框需要有多个校验器的时候使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
	<script type="text/javascript" src="js/jquery.validate.js" ></script>
	<script type="text/javascript" src="js/messages_zh.js" ></script>
	<script type="text/javascript">
		$(function(){
			$("#formId").validate({
				rules:{
					//字段的name属性:"校验器"
					userName:"required",//required在此含义是必填
					//字段的name属性:{校验器:值,校验器:值}
					passWord:{
						required:true,
						digits:true //digits是整数校验器,后面写true表示启动此校验器
					}
				}
			});
			
		})
		
	</script>
	<body>
		<form id="formId">
	用户名(必填)：<input name="userName" /><br />
	密码：(必填数字):<input name="passWord" /><br />
	<input type="submit" value="提交" />
	</form>
	</body>
</html>

messages{}内的格式跟rules类似

messages的格式:
格式1:
字段的name属性:"提示信息"
格式2:
字段的name属性:{校验器:"提示信息",校验器:提示信息"}

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.error{
				color:red;
			}
			
		</style>
	</head>
	<body>
		<form id="myform" action="01jquery快速开始.html">
			用户名：<input type="text" name="username" /><br/>
			密码：<input type="password" name="password" /><br/>
			确认密码：<input type="password" name="repwd" /><br/>
			邮箱：<input type="text" name="email" /><br/>
			性别：<input type="radio" name="sex" value="female" />女<input type="radio" name="sex" value="male" />男
			<label for="sex" class="error"></label>
			<br/>
			生日：<input type="text" name="birthday" /><br/>
			
			<input type="submit" value="注册" /><br/>
		</form>
	</body>
	<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
	<!--validation插件是运行在jquery环境上的，因此先引入jquery，再引入validation-->
	<script type="text/javascript" src="js/jquery.validate.js" ></script>
	<!--引入国际化库，让提示的内容是你想要的哪个国家的语言-->
	<script type="text/javascript" src="js/messages_zh.min.js" ></script>
	<script>
		$("#myform").validate(
			{rules:{
				//表单元素一
				"username":{
					//规则一
					required:true,
					//规则二
					minlength:6
				},
				//表单元素二
				"password":{
					required:true,
					minlength:6
				},
				"repwd":{
					required:true,
					equalTo:"input[name='password']"
				},
				"email":{
					email:true
				},
				"sex":{
					required:true
				},
				"birthday":{
					dateISO:true
				}
			},messages:{
				"username":{
					required:"请一定要留下你的名字！",
					minlength:"你输入的名字太短了不太好！长一点！"
				}
				
			}}
		);
		
	</script>
</html>

效果：