利用validate进行表单校验

最新推荐文章于 2024-04-15 14:11:06 发布

火焰长岛冰茶

最新推荐文章于 2024-04-15 14:11:06 发布

阅读量2.5k

点赞数 1

分类专栏： Web前端文章标签： validate jquery js 前端

本文链接：https://blog.csdn.net/u013469562/article/details/52906071

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。----截取自http://www.runoob.com/jquery/jquery-plugin-validate.html

本文就利用jquery的validate插件来实现表单的校验功能，首先来一个简单的案例：

<script>
			//页面加载完成时调用
			$(function(){
				//要给对应的表单加入validate校验
				$("#f1").validate({
					rules:{
						username:{
							required:true
						}
					}
				});
			});
		</script>

html代码如下：

<body>
		<form id="f1" >
			<table border="1" width="100%" cellpadding="0" cellspacing="0">
				<tr>
					<td colspan="3"><font color="cornflowerblue" size="5">测试表单</font></td>
				</tr>
				<tr>
					<td>用户名（必填字段，长度范围6~10）</td>
					<td colspan="2">
						<input type="text" name="username"  />
					</td>
				</tr>
				<tr>
					<td>Email（符合邮件格式）</td>
					<td colspan="2">
						<input type="text" name="email" />
					</td>
				</tr>
				<tr>
					<td>出生日期（日期格式）</td>
					<td colspan="2">
						<input type="text" name="birthday" />
					</td>
				</tr>
				<tr>
					<td>薪资（数字）</td>
					<td colspan="2">
						<input type="text" name="sal" />
					</td>
				</tr>
				<tr>
					<td>一天工作时长（值范围6~16）</td>
					<td colspan="2">
						<input type="text" name="workForday" />
					</td>
				</tr>
				<tr>
					<td>密码（必须填写）</td>
					<td colspan="2">
						<input type="text" name="pwd" />
					</td>
				</tr>
				<tr>
					<td>确认密码（必须填写，且与密码值要相同）</td>
					<td colspan="2">
						<input type="text" name="repwd" />
					</td>
				</tr>
				<tr>
					<td></td>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>

1）文件中定义了很多的表格的单元格分别让用户输入符合规则的文本内容，前提是必须是form的表单才可以进行验证，这点本人已经进行了相关的验证，而且

<input type="submit" value="注册" />中必须在type中填入submit属性。

2）在相应的script代码块中写入jquery代码，必须先进行页面加载完成时的函数中进行，因为是写在head标签中，如果不加入页面加载完成时的相关代码则会导致页面加载不完全，找不到相应标签。之后在其中为对应的表单加入validate约束。其中的书写方式是以key：{}形式完成的。rules是规则，里面嵌套标签名，标签名中嵌套对应的一些规则，规则具体如下，使用时查询相应的api

1	required:true	必须输入的字段。
2	remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:"#field"	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

之后也可以利用messages以同样的书写规则自定义错误信息。

下面贴出具体表单校验的源代码以及实现方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			label{
				color:red;
			}
		</style>
		<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>
			//页面加载完成时调用
			$(function(){
				//要给对应的表单加入validate校验
				$("#f1").validate({
					rules:{
						username:{
							required:true,
							rangelength:[3,10]
						},
						email:{
							email:true
						},
						birthday:{
							date:true
						},
						sal:{
							number:true
						},
						workForday:{
							range:[6,16]
						},
						pwd:{
							required:true
						},
						repwd:{
							required:true,
							equalTo:"input[name='pwd']"
						}
					},
					messages:{
						username:{
							required:"这是必填字段",
							rangelength:"必须是{0}到{1}位"
						},
						email:{
							email:"必须是邮箱啊"
						}
					}
				});
			});
		</script>
	</head>
	<body>
		<form id="f1" >
			<table border="1" width="100%" cellpadding="0" cellspacing="0">
				<tr>
					<td colspan="3"><font color="cornflowerblue" size="5">测试表单</font></td>
				</tr>
				<tr>
					<td>用户名（必填字段，长度范围6~10）</td>
					<td colspan="2">
						<input type="text" name="username"  />
					</td>
				</tr>
				<tr>
					<td>Email（符合邮件格式）</td>
					<td colspan="2">
						<input type="text" name="email" />
					</td>
				</tr>
				<tr>
					<td>出生日期（日期格式）</td>
					<td colspan="2">
						<input type="text" name="birthday" />
					</td>
				</tr>
				<tr>
					<td>薪资（数字）</td>
					<td colspan="2">
						<input type="text" name="sal" />
					</td>
				</tr>
				<tr>
					<td>一天工作时长（值范围6~16）</td>
					<td colspan="2">
						<input type="text" name="workForday" />
					</td>
				</tr>
				<tr>
					<td>密码（必须填写）</td>
					<td colspan="2">
						<input type="text" name="pwd" />
					</td>
				</tr>
				<tr>
					<td>确认密码（必须填写，且与密码值要相同）</td>
					<td colspan="2">
						<input type="text" name="repwd" />
					</td>
				</tr>
				<tr>
					<td></td>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

其中有许多字段没有添加自定义的messages，大家可以对照进行相关练习。

扩展知识：关于自定义规则和错误信息的方式：

如果官方提供的一些功能不能满足我们的需求，我们可以在jquery代码中自定义相关的规则和错误信息，必须身份证的校验等，具体框架如下：

<body>
		<form id="f1" >
			<table border="1" width="100%" cellpadding="0" cellspacing="0">
				<tr>
					<td colspan="3"><font color="cornflowerblue" size="5">测试表单</font></td>
				</tr>
				<tr>
					<td>用户名（必填字段，长度范围6~10）</td>
					<td colspan="2">
						<input type="text" name="username"  />
					</td>
				</tr>
				
				<tr>
					<td>身份证号（必须填写，必须符合身份证号码规则）</td>
					<td colspan="2">
						<input type="text" name="idCard" />
					</td>
				</tr>
				<tr>
					<td></td>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>

这里我们需要在表单校验的jquery代码执行之前自定义我们的规则和错误信息，这里错误信息必须我们自己提供，因为文档中没有相应的错误信息，不会显示相应的错误提示。代码如下所示：

<script>
			//页面加载完成时调用
			$(function(){
				//创建一个自定义校验规则   必须在给表单加入validate校验之前
				//value 用户在表单输入项上输入的参数值  
				//ele   这个表单输入项 元素对象
				//param  开发人员写规则参数   例如：required:true    true就是规则参数
				
				//这个匿名函数，必须有一个返回值  boolean
				//true  表示符合规则
				//false  表示不符合规则，需要阻止表单提交，并且显示错误信息
				$.validator.addMethod("myIdCard",function(value,ele,param){
					//首先判断，开发人员是否需要进行校验
					if(param){
						//开发人员需要进行规则校验
						var reg=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
						if(reg.test(value)){
							return true;
						}else{
							return false;
						}
					}else{
						//开发人员不需要进行规则校验
						return true;
					}
				});
				
				
				
				
				//要给对应的表单加入validate校验
				$("#f1").validate({
					rules:{
						username:{
							required:true,
							rangelength:[3,10]
						},
						idCard:{
							required:true,
							myIdCard:true
						}
					},
					messages:{
						username:{
							required:"这是必填字段",
							rangelength:"必须是{0}到{1}位"
						},
						idCard:{
							myIdCard:"必须是身份证格式"
						}
					}
				});
			});
		</script>

自此关于validate的相关功能大体之上已经说完了，至此可以看出validate进行表单校验比jquery和js通过绑定onclick事件来进行校验要简单的多