jQuery-validation-CSDN博客

本文详细介绍如何使用jQuery Validate插件进行表单验证，包括导入必要库、设置验证规则及消息提示，通过实例演示如何对用户名、密码、电子邮件和性别等字段进行有效性检查。

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

用于表单验证

Validate是jQuery插件，必须在JQuery的基础上进行运行。所以必选导入jQuery库，validate库，和国化资源库（可选）

使用前提

errorPlacement:function(error,element) {error.appendTo(element.parent()); }

指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。

success:function(succ,element){

succ.addClass("success");

}

要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。

例子：

注意：radio控件后面必须写一个label标签，class必须是error，for必须指向radio的name属性

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			label.error{
				background-image:url(img/unchecked.gif);
				background-size: 12px;
				padding-left:20px ;
				background-repeat: no-repeat;
				color:red;
			}
			label.success{
				color: green;
				background-image: url(img/34.png);
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.js" ></script>
		<script type="text/javascript" src="js/messages_zh.js" ></script>
		<script>
			$(function(){
				$("#vali").validate({
					rules:{
						user:{
							required:true,
							maxlength:6
						},
						password:{
							required:true,
							digits:true,
							minlength:5
						},
						repassword:{
							required:true,
							equalTo:"[name=password"
						},
						emil:{
							required:true,
							email:true
						},
						sex:{
							required:true
						}
					},
					messages:{
						user:{
							required:"用户名不可以为空",
							maxlength:"长度至少为六位"
						},
						password:{
							required:"密码不可以为空",
							digits:"必须为数字",
							minlength:"长度至少六位"
						},
						repassword:{
							required:"确认密码必填",
							equalTo:"两次密码输入不一致"
						},
						emil:{
							required:"邮箱不可为空",
							email:"邮箱格式不正确"
						},
						sex:{
							required:"性别必须勾选"
						}
					},
					success:function(succ,element){
						succ.addClass("success");
					},
					errorElement:"label"
				});
			});
		</script>
	</head>
	<body>
		<form action="#" id="vali">
			<p>用户名：<input type="text" name="user" /></p>
			<p>密码：<input type="password" name="password" /></p>
			<p>确认密码：<input type="password" name="repassword" /></p>
			<p>邮箱：<input type="text" name="emil" /></p>
			<p>性别：男<input type="radio" name="sex" value="man"/>
			女<input type="radio" name="sex" value="woman"/>
			<label for="sex" class="error" style="display: none;"></label>
			</p>
			<input type="submit" value="提交" />
		</form>
	</body>
</html>