(一)默认校验规则
(1) required:true 必输字段
(2) remote:"check.php" 使用ajax方法调用check.php验证输入值
(3) email:true 必须输入正确格式的电子邮件
(4) url:true 必须输入正确格式的网址
(5) date:true 必须输入正确格式的日期
(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
### jQuery Validate 表单验证插件使用方法
在前端开发中，表单验证是一项非常重要的功能，它确保用户提交的数据符合预期的要求。jQuery Validate插件是基于jQuery的一个强大的表单验证库，它提供了多种预定义的验证方法以及自定义验证规则的能力。下面将详细介绍该插件中的默认校验规则及其应用。
#### 一、默认校验规则
1. **required:** 设置为 `true` 时，表示该字段是必填项。
- 示例：`$("#username").rules("add", { required: true });`
- 作用：如果该字段为空，则验证失败。
2. **remote:** 配置为 `"check.php"` 时，使用 AJAX 方法调用 `check.php` 来验证输入值。
- 示例：`$("#username").rules("add", { remote: "check.php" });`
- 作用：远程验证输入数据是否有效或已存在。
3. **email:** 设置为 `true` 时，表示必须输入正确格式的电子邮件地址。
- 示例：`$("#email").rules("add", { email: true });`
- 作用：检查邮箱地址格式是否正确。
4. **url:** 设置为 `true` 时，表示必须输入正确格式的网址。
- 示例：`$("#website").rules("add", { url: true });`
- 作用：检查网址格式是否正确。
5. **date:** 设置为 `true` 时，表示必须输入正确格式的日期。
- 示例：`$("#birthdate").rules("add", { date: true });`
- 作用：检查日期格式是否正确。
6. **dateISO:** 设置为 `true` 时，表示必须输入正确格式的日期（ISO），如：2009-06-23 或 1998/01/22。
- 示例：`$("#iso_date").rules("add", { dateISO: true });`
- 作用：仅验证日期格式，不验证日期的有效性。
7. **number:** 设置为 `true` 时，表示必须输入合法的数字（包括负数和小数）。
- 示例：`$("#age").rules("add", { number: true });`
- 作用：检查数字格式是否正确。
8. **digits:** 设置为 `true` 时，表示必须输入整数。
- 示例：`$("#age").rules("add", { digits: true });`
- 作用：只允许输入整数。
9. **creditcard:** 设置为 `true` 时，表示必须输入合法的信用卡号。
- 示例：`$("#cc_number").rules("add", { creditcard: true });`
- 作用：验证信用卡号格式是否正确。
10. **equalTo:** 设置为 `"#field"` 时，表示输入值必须与 `#field` 相同。
- 示例：`$("#password_confirm").rules("add", { equalTo: "#password" });`
- 作用：验证两个输入框中的值是否一致。
11. **accept:** 设置为特定的扩展名列表，表示输入必须包含合法的后缀名（通常用于上传文件的后缀验证）。
- 示例：`$("#file").rules("add", { accept: "jpg|png|gif" });`
- 作用：限制可上传文件的类型。
12. **maxlength:** 设置为 `5` 时，表示输入长度最多是5个字符（汉字算一个字符）。
- 示例：`$("#short_description").rules("add", { maxlength: 5 });`
- 作用：限制输入的最大长度。
13. **minlength:** 设置为 `10` 时，表示输入长度至少是10个字符（汉字算一个字符）。
- 示例：`$("#long_description").rules("add", { minlength: 10 });`
- 作用：限制输入的最小长度。
14. **rangelength:** 设置为 `[5,10]` 时，表示输入长度必须介于 5 和 10 个字符之间（汉字算一个字符）。
- 示例：`$("#description").rules("add", { rangelength: [5, 10] });`
- 作用：限制输入的长度范围。
15. **range:** 设置为 `[5,10]` 时，表示输入值必须介于 5 和 10 之间。
- 示例：`$("#score").rules("add", { range: [5, 10] });`
- 作用：限制输入值的范围。
16. **max:** 设置为 `5` 时，表示输入值不能大于5。
- 示例：`$("#score").rules("add", { max: 5 });`
- 作用：限制输入值的最大值。
17. **min:** 设置为 `10` 时，表示输入值不能小于10。
- 示例：`$("#score").rules("add", { min: 10 });`
- 作用：限制输入值的最小值。
#### 示例代码
接下来，我们来看一个简单的示例，展示如何使用 jQuery Validate 插件进行表单验证：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Validate Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#login").validate({
rules: {
username: {
required: true
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
equalTo: "#password"
}
},
messages: {
username: "请输入用户名",
email: {
required: "请输入邮箱地址",
email: "请输入有效的邮箱地址"
},
password: {
required: "请输入密码",
minlength: "密码长度至少为5个字符"
},
confirm_password: {
required: "请再次输入密码",
equalTo: "两次密码输入不一致"
}
}
});
});
</script>
</head>
<body>
<form action="" method="post" id="login">
<label for="username">用户名:</label>
<input name="username" type="text" id="username"/>
<label for="email">邮箱:</label>
<input name="email" type="text" id="email"/>
<label for="password">密码:</label>
<input name="password" type="password" id="password"/>
<label for="confirm_password">确认密码:</label>
<input name="confirm_password" type="password" id="confirm_password"/>
<input name="userinfosub" type="submit" value="提交"/>
</form>
</body>
</html>
```
在上述示例中，我们为用户名、邮箱、密码以及确认密码设置了不同的验证规则，并且自定义了错误提示消息。通过这种方式，我们可以轻松地实现表单验证功能，并提高用户体验。
- 1
- 2
前往页