jquery validation纪要，我们的好伴侣

最新推荐文章于 2021-03-07 18:43:09 发布

陈袁

最新推荐文章于 2021-03-07 18:43:09 发布

阅读量628

点赞数

分类专栏：技术工具文章标签： jquery validation 校验

本文链接：https://blog.csdn.net/achenyuan/article/details/76136059

版权

技术工具专栏收录该内容

77 篇文章 4 订阅

订阅专栏

首先明确一点，jquery validation框架是为form标签使用的，其它不在form标签里的使用无效。被他吸引是因为框架可以做到自动做参数验证，而且有提示，提示还是动态的，省去了我们在页面里加各种标签为了显示错误提示而带来的工作量。

1.初探，该框架包含4个js文件

第一个当然是基础的jquery.js

第二个是jquery.validate.min.js包含是验证的主要逻辑

第三个语言包messages_zh.js，它包含默认的提示语，有中文，英文共60个国家和地区的语言。

第四个是 additional-methods.js，一般添加的自定义校验方法在里面。自定义校验规则也可以单独其它到其它方法里，所以additional-methods.js不是必需的文件。

输入如下：

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script src=http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/additional-methods.js”/>

这4个js文件最重要，其它的到其要时再引入和学习即可。

2.语法

默认的几个检验规则，当然这个也是可以自定义的,后面会写到。

2.1必填选项：required:true,简写required,全写是required:true,2个都有效

2.2 数字

合法值：number:true 必须输入合法的数字（负数，小数）

digits:true 必须输入整数。

最小值：min:10 输入值不能小于 10。

最大值：max:5 输入值不能大于 5。

某个范围：range:[5,10] 输入值必须介于 5 和 10 之间。

2.3字符串

最小长度：minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。

最大长度：maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。

某个长度字符串：rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。

2.4 其它

格式后缀：以前版本叫accept，新版本中改为extension，比如extension:'gif|jpe?g|png'

url验证: url:true 必须输入正确格式的网址。

email验证: email:true 必须输入正确格式的电子邮件。

日期：date:true 必须输入正确格式的日期。日期校验ie6 出错，慎用。

dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。

remote:远程校验是否合法，向rul指定的路径发送请求，如果为ture则校验成功，为false则校验失败

3.第一个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function(form) {
   $(form).submit();
      alert("提交事件!");
    }
});
$().ready(function() {
// 让校验规则生效
  $("#signupForm").validate({
	    rules: {
	      firstname: "required",
	      lastname: "required",
	    },
	    messages: {
	      firstname: "请输入您的名字",
	      lastname: "请输入您的姓氏",
	      username: {
	        required: "请输入用户名",
	        minlength: "用户名必需由两个字母组成"
	      }
	    }
	});
});
</script>
<style>
.error{
	color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input  name="lastname" type="text">
    </p>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>
</body>
</html>

运行效果如下：

结论如下：

1.想要让校验生效要调用validate()方法

2.rules是校验规则的集合，规则key是from表单里标签的name字段，比如firstname:"required"里firstname与label标签里name是firstname标签绑定。

3.required 在2种写法，简写直接当字符串使用”required”,或者当成对象使用{required:true},2种方式没区别

4.messages是提示消息，取值也是按key取值的。标签下不同的校验准备给不同的提示。

4.想要了解jquery validation框架只需要掌握2点，

第一：参数怎么验证，消息提示怎么配置。

第二：消息在哪里显示。

4.1参数怎么验证：

4.1.1 调用 validate()让规则和其它设置生效，不传参数的话则使用默认值

4.1.2 在validate()方法里添加rules，message,errorPlacement等参数

4.1.3调用setDefaults方法设置默认参数，可调或不调用,不调用的话则将submitHandler放在validate方法里，

例如$.validator.setDefaults({

submitHandler:function(form) {

$(form).submit();

alert("submitted!");

}

});

4.2.消息在哪里显示：

errorElement:指定使用什么标签标记错误，类型是String,默认“label”

wrapper:指定使用什么标签再把上边的errorElement包起来，类型是String，没特殊要求可以不设置

errotContainer:Selector, 显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大

4.2.1.灵活性高的方式，动态修改。errorPlacement:指定错误信息的位置，类型function,默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面，我们可以修改它，

errorPlacement:function(error, element) {

error.appendTo(element.parent());

}

error显示错误信息的标签，element是被验证的标签

4.2.2.单一方式，指定信息容器。errorLabelContainer:把错误信息统一放一个容器里，类型是Selector，一般常用在显示将错误信息集中在一个容器里的情况，如果要在不同的标签后面显示各自的提示就不用设置。

errorClass:指定的错误的样式，

例如：

$("#myform").validate({

errorElement:"label",

errorLabelContainer:"#messageBox",

wrapper:"li",

errorClass:"error"

submitHandler:function(){

alert("Submitted!")

}

})

错误信息用label显示，外层再包一层li,最后将所以的错误提示放到messageBox里显示。

4.2.3消息显示时将错误提示事先放在html容器里：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Test for jQuery validate() plugin</title>
	<link rel="stylesheet" media="screen" href="css/screen.css">
	<script src="../lib/jquery.js"></script>
	<script src="../dist/jquery.validate.js"></script>
	<style>
	.cmxform fieldset p.error label {
		color: red;
	}
	div.container {
		background-color: #eee;
		border: 1px solid red;
		margin: 5px;
		padding: 5px;
	}
	div.container ol li {
		list-style-type: disc;
		margin-left: 20px;
	}
	div.container {
		display: none
	}
	.container label.error {
		display: inline;
	}
	form.cmxform {
		width: 30em;
	}
	form.cmxform label.error {
		display: block;
		margin-left: 1em;
		width: auto;
	}
	</style>
	<script>
	// only for demo purposes
	$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted! (skipping validation for cancel button)");
		},
		debug:true
	});

	$().ready(function() {
		var container = $('div.container');//指定错误容器
		// validate the form when it is submitted
		var validator = $("#form1").validate({
			errorContainer: container,
			errorLabelContainer: $("ol", container),
			wrapper: 'li'
		});

		$(".cancel").click(function() {
			validator.resetForm();
		});
	});
	</script>
</head>

<body>
	<h1 id="banner"><a href="http://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
	<div id="main">
		<!-- our error container -->
		<div class="container">
			<h4>errorLabelContainer：这是一个错误显示面板</h4>
			<ol>
				<li>
					<label for="email" class="error">Please enter your email address</label>
				</li>
				<li>
					<label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label>
				</li>
				<li>
					<label for="address" class="error">Please enter your address (at least 3 characters)</label>
				</li>
				<li>
					<label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label>
				</li>
				<li>
					<label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label>
				</li>
			</ol>
		</div>
		<form class="cmxform" id="form1" method="get" action="">
			<fieldset>
				<legend>Validating a complete form</legend>
				<p>
					<label for="email">Email</label>
					<input id="email" name="email" required type="email">
				</p>
				<p>
					<label for="agree">Favorite Color</label>
					<select id="color" name="color" title="Please select your favorite color!" required>
						<option></option>
						<option>Red</option>
						<option>Blue</option>
						<option>Yellow</option>
					</select>
				</p>
				<p>
					<label for="phone">Phone</label>
					<input id="phone" name="phone" required type="number" rangelength="[2,8]">
				</p>
				<p>
					<label for="address">Address</label>
					<input id="address" name="address" required minlength="3">
				</p>
				<p>
					<label for="avatar">Avatar</label>
					<input type="file" id="avatar" name="avatar" required>
				</p>
				<p>
					<label for="agree">Please agree to our policy</label>
					<input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" required>
				</p>
				<p>
					<input class="submit" type="submit" value="Submit">
					<input class="cancel" type="submit" value="Cancel">
				</p>
			</fieldset>
		</form>
		<div class="container">
			<h4>errorContainer：显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大</h4>
		</div>
		<a href="index.html">Back to main page</a>
	</div>
</body>
</html>

errorContainer指定可以自动实现有错误信息出现时把容器属性变为显示

errorLabelContainer:将错误信息包起来。

4.2.4 js里指定错误提示位置及其它相关参数，常用方式，因为看起来页面简单：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
  $("#signupForm").validate({
  //指定规则
	    rules: {
	      firstname: "required",
	      lastname: "required",
	      username: {
	        required: true,
	        minlength: 2
	      },
	      password: {
	        required: true,
	        minlength: 5
	      },
	      confirm_password: {
	        required: true,
	        minlength: 5,
	        equalTo: "#password"
	      },
	      email: {
	        required: true,
	        email: true
	      },
	      "topic[]": {
	        required: "#newsletter:checked",
	        minlength: 2
	      },
	      agree: "required"
	    },
		//指定错误提示位置
		errorPlacement: function(label, element) {
				// position error label after generated textarea
				if (element.is("textarea")) {
					label.insertAfter(element.next());
				} else {
					label.insertAfter(element)
				}
			},
		wrapper :"li",//指定label的包裹
		//规则里每个字段对象的消息提示
	    messages: {
	      firstname: "请输入您的名字",
	      lastname: "请输入您的姓氏",
	      username: {
	        required: "请输入用户名",
	        minlength: "用户名必需由两个字母组成"
	      },
	      password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母"
	      },
	      confirm_password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母",
	        equalTo: "两次密码输入不一致"
	      },
	      email: "请输入一个正确的邮箱",
	      agree: "请接受我们的声明",
	      topic: "请选择两个主题"
	    }
	});
});
</script>
<style>
.error{
	color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester
      </label>
      <label for="topic" class="error" style="display:none">至少选择两个</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>
</body>
</html>

5.validate方法里success属性指定了都验证成功后的回调函数，语法是success:String,callBack

如果只传第一个参数会将其当成样式class,也可单独传方法做为回调函数

6.添加自定义校验规则

比如我们想添加个验证手机号码的验证规则：

$.validator.addMethod( "phoneUK", function( phone_number, element ,param) {
    alert(phone_number + ":" + element + ":" + param);
	phone_number = phone_number.replace( /\(|\)|\s+|-/g, "" );
	return this.optional( element ) || phone_number.length > 9 &&
		phone_number.match( /^(?:(?:(?:00\s?|\+)44\s?)|(?:\(?0))(?:\d{2}\)?\s?\d{4}\s?\d{4}|\d{3}\)?\s?\d{3}\s?\d{3,4}|\d{4}\)?\s?(?:\d{5}|\d{3}\s?\d{3})|\d{5}\)?\s?\d{4,5})$/ );
}, "Please specify a valid phone number" );

语法如下：addMethod：name, method, message

第一个参数是校验规则名

第二个是方法是校验方法，有3个参数，第一个参数是传入的值，第二个参数是要校验的标签，第三个参数是使用的方式时传的值。

第三个参数是默认的提示，当然我们可以在validate的message对象里添加自己的提示。

在form里使用方式如下：

在上面的自定义校验方法里添加了打印，提示如下：