jQuery Validate
叁念
图1.1 jQuery Validate 下载包
如果你不想下载也可以使用提供的CDN(其它提供商请自行百度):
图2.1 演示效果
图2.2 演示效果
下面说明一下required的三种使用方式（后边两种常用于，表单中需要同时填或不填的元素）：
-
-
-
- 一、jQuery Validate介绍
- 1.1 简介
- 1.2 下载
- 1.3 默认校验规则一览
- 二、jQuery Validate的使用入门
- 2.1 使用方式一：将校验规则写到控件中
- 2.2 使用方式二：将校验规则写到 js 代码中
- 三、探究 jQuery Validate 复杂验证方式
- 一、jQuery Validate介绍
-
-
参考文献：
http://www.runoob.com/jquery/jquery-plugin-validate.html
https://jqueryvalidation.org/
本文项目源码：
链接: https://pan.baidu.com/s/12SXdtu_W4Yo8VatXU72RIA 密码: nz1m
一、jQuery Validate介绍
1.1 简介
它是一款jQuary插件，作用是使得客户端的表单验证变得更加的容易，它不仅内置了许多的验证规则，如：是否必填、是否邮箱、是否长度满足等等规则。而且可以自定义定制规则，总体来说是一个很强大的验证插件，无需你去编写复杂的js代码与正则表达式。
1.2 下载
官方下载地址如下：https://jqueryvalidation.org/ ，下载后如图所示：
图1.1 jQuery Validate 下载包
如果你不想下载也可以使用提供的CDN(其它提供商请自行百度):
https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js
https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js
https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/additional-methods.js
https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/additional-methods.min.js
1.3 默认校验规则一览
| 规则 | 作用 |
|---|---|
| required:true | 必须输入的字段 |
| email:true | 必须输入正确格式的电子邮件 |
| url:true | 必须输入正确格式的网址 |
| date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用 |
| dateISO:true | 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性 |
| number:true | 必须输入合法的数字（负数，小数 |
| digits:true | 必须输入整数 |
| creditcard: | 必须输入合法的信用卡号 |
| equalTo:”#field” | 输入值必须和 #field 相同 |
| accept: | 输入拥有合法后缀名的字符串（上传文件的后缀） |
| maxlength:5 | 输入长度最多是 5 的字符串（汉字算一个字符） |
| minlength:10 | 输入长度最小是 10 的字符串（汉字算一个字符） |
| rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符） |
| range:[5,10] | 输入值必须介于 5 和 10 之间 |
| max:5 | 输入值不能大于 5 |
| min:10 | 输入值不能小于 10 |
| remote:”check.php” | 使用 ajax 方法调用 check.php 验证输入值 |
二、jQuery Validate的使用入门
注意：jQuery Validate 的提示默认是英文，如果你想将提示设置为中文或者自定义提示，请将以下引入：
<script src="jquery-validation-1.17.0/dist/localization/messages_zh.js">script>2.1 使用方式一：将校验规则写到控件中
下面介绍一些上表中的常用校验，注意：有些校验不支持控件方式
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Validatetitle>
<script src="jquery-validation-1.17.0/lib/jquery.js">script>
<script src="jquery-validation-1.17.0/dist/jquery.validate.min.js">script>
<script src="jquery-validation-1.17.0/dist/localization/messages_zh.js">script>
<script>
//设置页面加载完成后开始校验
$().ready(function() {
$("#Form").validate();
});
script>
<style>
.error{
color:red;
}
style>
head>
<body>
<form id="Form" method="get" action="#">
必填 required <input name="required" type="text" required/><br />
数字 number <input name="number" type="number" /><br />
邮件 email <input name="email" type="email"/><br />
网址 url <input name="url" type="url"/><br />
日期 date <input name="date" type="date"/><br />
最小长度 minlength <input name="minlength" type="text" minlength="2"/><br />
最大长度 maxlength <input name="maxlength" type="text" maxlength="5"/><br />
输入值不能大于 max <input name="max" type="text" max="5"/><br />
输入值不能小于 min <input name="min" type="text" min="2"/><br />
<input type="submit" value="提交" />
form>
body>
html>效果如下：
图2.1 演示效果
2.2 使用方式二：将校验规则写到 js 代码中
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="jquery-validation-1.17.0/lib/jquery.js">script>
<script src="jquery-validation-1.17.0/dist/jquery.validate.min.js">script>
<script src="jquery-validation-1.17.0/dist/localization/messages_zh.js">script>
<script type="text/javascript">
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
$("#Form").validate({
//书写校验规则，格式为——> 控件name属性：校验规则
rules: {
required_name: "required",
maxlength_name:{
//可以进行组合
maxlength:5,
required:true
},
minlength_name:{
minlength:2
},
max_name:{
max:5,
},
//举例密码场景
password:{
required:true,
},
re_password:{
required:true,
equalTo:"#password"
}
},
//书写提示语，格式为——> 控件name属性：提示语
messages: {
required_name: "请输入您的名字",
maxlength_name:{
maxlength:"最大长度不允许超过5",
required:"请输入字符"
},
minlength_name:{
minlength:"最大长度不允许小于2"
},
max_name:{
max:"最大值不能超过5"
},
//举例密码场景
password:{
required:"请输入你要设置的密码",
},
re_password:{
required:"请再次输入密码",
equalTo:"输入密码不一致"
}
}
})
});
script>
<style>
.error {
color: red;
}
style>
head>
<body>
<form id="Form" method="get" action="">
必填 required <input name="required_name" type="text"/><br />
最大长度 maxlength <input name="maxlength_name" type="text"/><br />
最小长度 minlength <input name="minlength_name" type="text"/><br />
输入值不能大于 max <input name="max_name" type="number"/><br />
输入值不能小于 min <input name="min_name" type="number"/><br />
密码<input type="password" name="password" id="password" /><br />
再次输入<input type="password" name="re_password" id="re_password"/><br />
邮箱<input name="email" type="email"><br />
<input type="submit" value="提交" />
form>
body>
html>图2.2 演示效果
下面说明一下required的三种使用方式（后边两种常用于，表单中需要同时填或不填的元素）：
| 书写方式 | 说明 |
|---|---|
| required: true | 值是必须的 |
| required: “#aa:checked” | 选择aa元素是否选中，若表达式的值为真，则需要验证 |
| required: function(){} | 函数返回为真，表示需要验证 |