基于jQuery的表单验证插件validation的使用步骤

最新推荐文章于 2021-04-08 10:00:00 发布

xiangxiao_bobo

最新推荐文章于 2021-04-08 10:00:00 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/xiangxiao_bobo/article/details/107509429

版权

jQuery 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

表单验证可以说是前端验证最通用的一个功能，我们可以通过纯手工写代码的方式完成，也可以使用第三方工具来完成验证，今天我们就看一下validation插件如何实现表单验证。

1、首先需要上网下载validation插件资源库，我一般是通过下这个网址下载的。

https://github.com/jquery-validation/jquery-validation/releases/download/1.17.0/jquery-validation-1.17.0.zip

下载后解压：

2、在解压后的文件中找到需要的资源库文件，dist发布文件夹中，一个是压缩版，一个未压缩版，开发的话推荐使用压缩版（体积小，加密，加载速度快）。

在dist文件夹的子目录localization中还对应一个国际化的标准资源文件，用来翻译错误提示消息的，默认情况下是英文，可以通过这里不同的翻译资源文件，翻译成不同语言，这里选择的是汉化。

3、将资源库文件导入到HTML项目中，这里切记先导入jquery库文件，因为validation插件依赖于jquery库，如果需要汉化提示消息，需要把汉化资源库文件也要导入，如下所示：

4、编写表单并给表单绑定validate()验证方法。

5、给表单元素指定校验规则，下面是校验类型表，根据需求选择不同的校验规则通过表单元素的属性来指定。

例如：验证用户名的非空和字符长度的限制。

参考代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面表单验证</title>
		<!--导入库文件-->
		<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="js/messages_zh.min.js"></script>
	</head>
	<body>
		<h2>用户注册表单</h2>
		<form action="" method="post">
			<table border="1" width="600px" cellspacing="0">
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="uname" id="uname" required="true" 
						rangelength="[3,10]" /></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="pwd" id="pwd" required="true" 
						rangelength="[6,16]" /></td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="password" name="repwd" id="repwd" required="true" 
						rangelength="[6,16]" equalTo="#pwd" /></td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td><input type="text" name="email" id="email" required="true" 
						email="email" /></td>
				</tr>
				<tr>
					<td>出生日期：</td>
					<td><input type="text" name="birthday" id="birthday"  required="true"
						dateISO="YYYY-MM-dd" /></td>
				</tr>
				<tr>
					<td colspan="2"><input type="submit" name="sub" id="sub" value="提交" /></td>
				</tr>
			</table>
		</form>
	</body>
	<script type="text/javascript">
		$("form").validate();
	</script>
</html>

效果图：

以上可以实现基本的表单验证效果，然而我们还发现存在一些问题：

1、错误提示消息无法有针对性的提示，样式效果不美观

2、在代码中校验规则都是写的表单标签中的，如果一个标签需要验证的规范比较多，代码看起来有些冗余。

基于以上问题，我们需要对此进行优化处理，在validate插件内部，为我们提供了一些属性接口，可以由用户自定义。例如：

rules定义校验规则；messages定义自定义的错误消息内容；errorClass定义错误消息的样式；errorElement定义显示错误消息的标签。

优化后的代码：当验证出错时，相当于在每一个要验证的表单元素的后面动态添加一个label标签用来显示错误提示消息，例如：

等于说动态添加的label标签的id号是要验证的表单元素的id号-error，并同时给label标签添加一个类样式叫error，因为我们可以在网页中定义一个叫.error的类样式，这样就可以被label标签所引用。当然也可以通过errorClass属性指定其他的类型样式，还可以通过errorElement属性来指定其他标签来显示错误消息，例如:span p标签等，如果使用p标签提示文字会换行显示，因为p标签是块标签。这些效果读者可以自己去尝试。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面表单验证优化</title>
		<style type="text/css">
			.error{
				color: red;
				font-size: 12px;
			}
			/*.f{
				color: blue;
				font-size: 20px;
			}*/
		</style>
		<!--导入库文件-->
		<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="js/messages_zh.min.js"></script>
	</head>
	<body>
		<h2>用户注册表单</h2>
		<form action="" method="post">
			<table border="1" width="600px" cellspacing="0">
				<tr>
					<td>用户名：</td>
					<td>
						<input type="text" name="uname" id="uname" />
						<!--<label id="uname-error" class="error" for="uname">dddd</label>-->
					</td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="pwd" id="pwd" /></td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="password" name="repwd" id="repwd" /></td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td><input type="text" name="email" id="email" /></td>
				</tr>
				<tr>
					<td>出生日期：</td>
					<td><input type="text" name="birthday" id="birthday" /></td>
				</tr>
				<tr>
					<td colspan="2"><input type="submit" name="sub" id="sub" value="提交" /></td>
				</tr>
			</table>
		</form>
	</body>
	<script type="text/javascript">
		$("form").validate({
			//校验规则
			rules:{
				"uname":{
					required:true,
					rangelength:[3,10]
				},
				"pwd":{
					required:true,
					rangelength:[6,16]
				},
				"repwd":{
					required:true,
					rangelength:[6,16],
					equalTo:"#pwd"
				},
				"email":{
					required:true,
					email:"email"
				},
				"birthday":{
					required:true,
					dateISO:"YYYY-MM-dd"
				}
			},
			//自定义错误消息提示内容
			messages:{
				"uname":{
					required:"用户名不能为空",
					rangelength:"用户名长度必须在3-10个字符之间"
				},
				"pwd":{
					required:"密码不能为空",
					rangelength:"密码长度必须在6-16个字符之间"
				},
				"repwd":{
					required:"确认密码不能为空",
					rangelength:"密码长度必须在6-16个字符之间",
					equalTo:"两次密码不一致"
				},
				"email":{
					required:"邮箱不能为空",
					email:"邮箱格式不正确"
				},
				"birthday":{
					required:"出生日期不能为空",
					dateISO:"日期格式不正确"
				}
			},
			/*errorClass:"f",
			errorElement:"p"*/
		});
	</script>
</html>

效果图：

以上就是有关validation插件的基本应用，希望能给你的学习带来帮助。

技术不牛逼的我，有一颗永不放弃的心！

xiangxiao_bobo

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
基于jQuery的表单验证插件validation的使用步骤

表单验证可以说是前端验证最通用的一个功能，我们可以通过纯手工写代码的方式完成，也可以使用第三方工具来完成验证，今天我们就看一下validation插件如何实现表单验证。1、首先需要上网下载validation插件资源库，我一般是通过下这个网址下载的。https://github.com/jquery-validation/jquery-validation/releases/download/1.17.0/jquery-validation-1.17.0.zip下载后解压：...
复制链接

扫一扫

专栏目录