web-base-pc/src/util/README.md

校验工具使用说明

概述

validator.js 是一个通用的表单校验工具，提供了常用的校验规则和方法，遵循高内聚低耦合的设计原则。

引入方式

// 完整引入
import validator from '@/utils/validator.js';

// 按需引入
import { createValidators, validators, REGEX_PATTERNS } from '@/utils/validator.js';

使用方法

1. 在Element UI表单中使用校验规则

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. 直接校验（非表单场景）

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. 使用正则表达式

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 中添加对应的直接校验方法

示例：

// 添加新的正则
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);
};