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);
|
||
};
|
||
``` |