133 lines
3.3 KiB
Markdown
133 lines
3.3 KiB
Markdown
|
# 校验工具使用说明
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
`validator.js` 是一个通用的表单校验工具，提供了常用的校验规则和方法，遵循高内聚低耦合的设计原则。
|
|||
|
|
|
|||
|
|
## 引入方式
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 完整引入
|
|||
|
|
import validator from '@/utils/validator.js';
|
|||
|
|
|
|||
|
|
// 按需引入
|
|||
|
|
import { createValidators, validators, REGEX_PATTERNS } from '@/utils/validator.js';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
### 1. 在Element UI表单中使用校验规则
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
form: {
|
|||
|
|
mobile: '',
|
|||
|
|
email: '',
|
|||
|
|
name: ''
|
|||
|
|
},
|
|||
|
|
// 表单校验规则
|
|||
|
|
formRules: {
|
|||
|
|
// 手机号校验（必填）
|
|||
|
|
mobile: createValidators.mobile(true, '请输入正确的手机号码'),
|
|||
|
|
|
|||
|
|
// 邮箱校验（非必填）
|
|||
|
|
email: createValidators.email(false, '请输入正确的邮箱地址'),
|
|||
|
|
|
|||
|
|
// 中文姓名校验
|
|||
|
|
name: createValidators.chineseName(true, '请输入正确的中文姓名'),
|
|||
|
|
|
|||
|
|
// 组合使用多个校验规则
|
|||
|
|
description: [
|
|||
|
|
createValidators.required('请输入描述'),
|
|||
|
|
createValidators.length(10, 200, '描述长度为10-200个字符')
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 直接校验（非表单场景）
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { validators } from '@/utils/validator.js';
|
|||
|
|
|
|||
|
|
// 校验手机号
|
|||
|
|
const isValidMobile = validators.isMobile('13812345678'); // true
|
|||
|
|
|
|||
|
|
// 校验邮箱
|
|||
|
|
const isValidEmail = validators.isEmail('test@example.com'); // true
|
|||
|
|
|
|||
|
|
// 校验中文姓名
|
|||
|
|
const isValidName = validators.isChineseName('张三'); // true
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 使用正则表达式
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { REGEX_PATTERNS } from '@/utils/validator.js';
|
|||
|
|
|
|||
|
|
// 直接使用正则
|
|||
|
|
const mobileRegex = REGEX_PATTERNS.mobile;
|
|||
|
|
const isValid = mobileRegex.test('13812345678');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 可用的校验规则
|
|||
|
|
|
|||
|
|
### createValidators（用于Element UI表单）
|
|||
|
|
|
|||
|
|
- `mobile(required, message)` - 手机号校验
|
|||
|
|
- `email(required, message)` - 邮箱校验
|
|||
|
|
- `chineseName(required, message)` - 中文姓名校验
|
|||
|
|
- `required(message)` - 必填校验
|
|||
|
|
- `length(min, max, message)` - 长度校验
|
|||
|
|
|
|||
|
|
### validators（直接校验方法）
|
|||
|
|
|
|||
|
|
- `isMobile(mobile)` - 校验手机号
|
|||
|
|
- `isEmail(email)` - 校验邮箱
|
|||
|
|
- `isChineseName(name)` - 校验中文姓名
|
|||
|
|
|
|||
|
|
### REGEX_PATTERNS（正则表达式）
|
|||
|
|
|
|||
|
|
- `mobile` - 手机号：1开头的11位数字
|
|||
|
|
- `email` - 邮箱地址
|
|||
|
|
- `idCard` - 身份证号
|
|||
|
|
- `chineseName` - 中文姓名
|
|||
|
|
- `number` - 数字
|
|||
|
|
- `positiveInteger` - 正整数
|
|||
|
|
|
|||
|
|
## 扩展校验规则
|
|||
|
|
|
|||
|
|
如需添加新的校验规则，请在 `validator.js` 文件中：
|
|||
|
|
|
|||
|
|
1. 在 `REGEX_PATTERNS` 中添加新的正则表达式
|
|||
|
|
2. 在 `createValidators` 中添加对应的表单校验方法
|
|||
|
|
3. 在 `validators` 中添加对应的直接校验方法
|
|||
|
|
|
|||
|
|
示例：
|
|||
|
|
```javascript
|
|||
|
|
// 添加新的正则
|
|||
|
|
REGEX_PATTERNS.newRule = /^your-regex$/;
|
|||
|
|
|
|||
|
|
// 添加表单校验方法
|
|||
|
|
createValidators.newRule = function(required = true, message = '默认错误信息') {
|
|||
|
|
const rules = [];
|
|||
|
|
if (required) {
|
|||
|
|
rules.push({ required: true, message: '请输入内容', trigger: 'blur' });
|
|||
|
|
}
|
|||
|
|
rules.push({
|
|||
|
|
pattern: REGEX_PATTERNS.newRule,
|
|||
|
|
message,
|
|||
|
|
trigger: 'blur'
|
|||
|
|
});
|
|||
|
|
return rules;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 添加直接校验方法
|
|||
|
|
validators.isNewRule = function(value) {
|
|||
|
|
return REGEX_PATTERNS.newRule.test(value);
|
|||
|
|
};
|
|||
|
|
```
|