一款优秀的表单验证插件——validation插件_经典的表单验证插件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42132959/article/details/106197169

validation插件提供19种内置验证规则，支持自定义规则，具备实时验证功能，允许用户自定义提示信息。文章介绍了如何快速入门，包括引入jQuery库和validation插件，以及两种使用示例。

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

特点：

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

下载：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

快速入门：
第一步：引入jquery库和validation插件
000
使用前提：
001
检验方式：js代码方式
000
002
案例一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-1.8.3.js"></script>
		<script src="../js/jquery.validate.min.js"></script>
		<script src="../js/messages_zh.js"></script>
		<script>
			$(function(){
				$("#checkForm").validate({
					rules:{
						username:{
							required:true,
							minlength:6
						},
						password:{
							required:true,
							digits:true,
							minlength:6
						}
					},
					messages:{
						username:{
							required:"用户名不能为空",
							minlength:"用户名不得少于6位"
						},
						password:{
							required:"密码不能为空",
							digits:"密码必须是整数!",
							minlength:"密码不得少于6位"
						}
					}
				});
			});
		</script>
	</head>
	<body>
		<form action="#" id="checkForm">
			<label for="username">用户名:</label>
			<input type="text" id="username" name="username"/><br />
			<label for="password">密码:</label>
			<input type="text" id="password" name="password"/><br />
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

案例二：

<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
<script>
	$(function(){
		$("#registForm").validate({
			rules:{
				user:{
					required:true,
					minlength:2
				},
				password:{
					required:true,
					digits:true,
					minlength:6
				},
				repassword:{
					required:true,
					digits:true,
					minlength:6,
					equalTo:"[name='password']"
				},
				email:{
					required:true,
					email:true
				},
				username:{
					required:true,
					minlength:2
				},
				sex:{
					required:true
				}
			},
			messages:{
				user:{
					required:"用户名不能为空!",
					minlength:"用户名不得少于2个字符!"
				},
				password:{
					required:"密码不能为空!",
					digits:"密码必须是数字!",
					minlength:"密码长度不得低于6位!"
				},
				repassword:{
					required:"确认密码不能为空!",
					digits:"密码必须是数字!",
					minlength:"密码长度不得低于6位!",
					equalTo:"两次密码不一致!"
				},
				email:{
					required:"邮箱不能为空!",
					email:"邮箱格式不正确!"
				},
				username:{
					required:"姓名不能为空!",
					minlength:"姓名不得少于2个字符!"
				},
				sex:{
					required:"性别必须勾选!"
				}
			},
			errorElement: "label", //用来创建错误提示信息标签
			success: function(label) { //验证成功后的执行的回调函数
				//label指向上面那个错误提示信息标签label
				label.text(" ") //清空错误提示消息
					.addClass("success"); //加上自定义的success类
			}
		});
	})
</script>