jQuery--Validation插件（概述、表单验证、验证规则、自定义验证规则）详解

最新推荐文章于 2024-01-26 10:05:23 发布

吴声子夜歌

最新推荐文章于 2024-01-26 10:05:23 发布

阅读量2.6k

点赞数 5

分类专栏： jQuery web 文章标签： jQuery Web Validation 表单验证

本文链接：https://blog.csdn.net/cold___play/article/details/102024082

版权

web 同时被 2 个专栏收录

41 篇文章 4 订阅

订阅专栏

jQuery

30 篇文章 2 订阅

订阅专栏

Validation简介

最常使用的JavaScript的场合就是表单验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件——Validation。

Validation拥有如下特点：

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

Validation的使用

下载：
Validation下载

引入：

将jQuery源文件和jquery.validate.js引入到工程中
编写js代码对表单进行验证

Validation的语法

$("from表单的选择器").validate(json数据格式);//键值对 键：值 ({})

表单验证的格式：

//json数据格式：
{
	rules:{
		表单项name值：校验规则,
		表单项name值：校验规则...
	},
	messages:{
		表单项name值：错误提示信息,
		表单项name值：错误提示信息...
	}
}
//其中：校验规则，可以是一个也可以是多个，如果是多个使用json格式

Validation校验规则

规则	说明
required:true	必输字段,不能为空
remote:“remote-valid.jsp”	使用ajax方法调用remote-valid.jsp验证输入值
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期，日期校验ie6出错，慎用
dateISO:true	必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入整数
creditcard:true	必须输入合法的信用卡号
equalTo:"#password"	输入值必须和#password相同
accept:	输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5	输入长度最多是5的字符串(汉字算一个字符)
minlength:10	输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]	输入值必须介于 5 和 10 之间
max:5	输入值不能大于5
min:10	输入值不能小于10

默认的提示信息：

messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-2.1.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 type="text/javascript">
		$(function(){
			$("#checkForm").validate({
				rules:{
					uname:{
						required:true,//用戶名必填
						minlength:6//最少6位
					},
					pwd:{
						required:true,//必填
						rangelength:[8,12]//8-12位
					},
					pwd2:{
						required:true,//必填
						equalTo:pwd//与pwd相同
					},
					email:{
						required:true,//必填
						email:true//必须为Email格式
					}
				},
				messages:{
					uname:{
						required:"用户名不能为空",
						minlength:"用户名不得少于6位"
					},
					pwd:{
						required:"密码不能为空",
						rangelength:"密码必须为8-12位"
					},
					pwd2:{
						required:"密码不能为空",
						equalTo:"两次密码输入不一致"
					},
					email:{
						required:"格式错误",
					}
				}
			});
		});
	</script>
	<style>
		.error{
			color: red;
		}
	</style>
	<body>
		<div id="main">
			<form action="#" method="post" id="checkForm">
				用户名:<input type="text" id="uname" name="uname" /><br />
				密码:<input type="password" id="pwd" name="pwd" /><br />
				确认密码:<input type="password" id="pwd2" name="pwd2" /><br />
				Email:<input type="email"  id="email" name="email"/><br />
				<input type="submit" id="sub" name="sub" value="提交" />
				<input type="reset" value="重置" style="margin-left: 100px;"/>
			</form>
			
		</div>
	</body>
</html>

在这里插入图片描述
注意：
当错误提示信息不按照我们预想的位置显示时，我么你可以按照如下方式进行设置自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出阿里，jQuery验证插件会自动帮助我们控制它的显示与隐藏

<lable for="html元素name值" class="error" sytle="display:none">错误信息</lable>

如果设置了leble标签就不必在messages中设置此表单项错误提示信息了。

自定义校验规则

自定义校验规则步骤如下：
1. 调用方法：

$.validator.addMethod("校验规则名称", function(value, element, params){})

value：校验组件的value值
element：校验组件的节点对象
params：校验规则的参数

2. 在rules中通过校验规则名称使用校验规则：
3. 在messages中定义该规则对应的错误提示信息：

示例：

//自定义校验规则
$.validator.addMethod(
	//规则名称
	"checkUsername",
	//校验函数
	function(value,element,params){
		
		//标识
		var flag = false;
		//ajax异步校验用户名是否存在
		$.ajax({
			"async":false,
			"url":"${pageContext.request.contextPath}/checkUsername",
			"data":{"username":value},
			"type":"POST",
			"dataType":"json",
			"success":function(data){
				flag = data.isExist;
			}
		});
		return !flag;
	}

吴声子夜歌

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
jQuery--Validation插件（概述、表单验证、验证规则、自定义验证规则）详解

Validation简介最常使用的JavaScript的场合就是表单验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件——Validation。Validation拥有如下特点：内置验证规则：用于必填、数字、E-mail、URL和信用卡号码等19类内置验证规则自定义验证规则：可以很方便地自定义验证规则简单而强大的验证信息提示：默认了验证信息提示，并...
复制链接

扫一扫