表单校验 公共方法封装

描述：在部分表单使用场景中，常有IP、端口类的输入项，在提交表单时需要对内容进行校验，考虑多表单使用，可以将校验方法提取成公共方法进行封装，以便开发。

1. 使用场景

<el-form  ref="formData" :model="formData" :rules="rules" label-width="120px">
  <el-form-item label="名称" prop="name">
    <el-input v-model.trim="formData.name" placeholder="请输入名称" />
  </el-form-item>
  <el-form-item label="IP" prop="ip">
    <el-input v-model.trim="formData.ip" placeholder="请输入IP" />
  </el-form-item>
  <el-form-item label="端口" prop="port">
    <el-input v-model.trim="formData.port" placeholder="请输入端口" />
  </el-form-item>
</el-form>

一些只适用于当前表单的校验可以直接在验证规则中添加：

import { validateRule } from '@/utils/validateRules'; // 引入封装的校验规则文件

formData: {},
rules: {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { max: 20, message: '最大长度为20位', trigger: 'blur' }
  ],
  ip: [{ required: true, validator: validateRule.validateIpNat.validator({ name: 'IP' }).validator }],
  port: [{ required: true, validator: validateRule.validatorPort.validator({ name: '端口' }).validator }]
}

2. 方法封装

在 /utils 目录下新建一个 js 文件，导出一个自定义的验证规则对象，其中包含添加的各种校验属性，它会根据输入值与规则匹配对应的验证结果，并通过 callback 回调函数返回。

export const validateRule = {
  /**
   * 校验 IP 支持IPV4/IPV6
   * IP校验
   */
  validateIpNat: {
    validator(params) {
      return {
        validator: (rule, value, callback) => {
          // IPV4/IPV6 正则表达式
          const reg = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/;
          if (!value) {
            callback(new Error(`请输入${params.name}`));
          } else if (!reg.test(value)) {
            callback(new Error(`检测到错误格式IP【${value}】`));
          } else {
            callback();
          }
        },
        trigger: 'blur'
      };
    }
  },
  /**
   * 校验 (1 - 65535) 数字
   * 端口校验
   */
  validatorPort: {
    validator(params) {
      return {
        validator: (rule, value, callback) => {
          const reg = /^[0-9]*$/;
          if (!value) {
            callback(new Error(`请输入${params.name}`));
          } else if (!reg.test(value)) {
            callback(new Error(`端口格式不正确，请输入数字类型`));
          } else if (value < 1 || value > 65535) {
            callback(new Error(`检测到端口范围超出（提示：1 - 65535）`));
          } else {
            callback();
          }
        },
        trigger: 'blur'
      };
    }
  },
}

3. 其它校验

可以根据业务需求和场景需要自定义添加其它合适的校验方法。

/**
* 校验 密码至少包含数字、大写字母、小写字母中的两种且不少于8位'
* 密码校验
*/
validatorPsd: {
  validator(params) {
    return {
      validator: (rule, value, callback) => {
        const reg = /^(?![\d]+$)(?![a-z]+$)(?![A-Z]+$)[\da-zA-z]{8,}$/g;
        if (!value) {
          callback(new Error(`请输入${params.name}`));
        } else if (!reg.test(value)) {
          callback(new Error('密码至少包含数字、大写字母、小写字母中的两种，且不少于8位'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    };
  }
},
/**
* 校验 大小写字母或者数字不能为空 最小长度minx 最大长度max
* 大小写字母数字校验
*/
validatorNumAndLetter: {
  validator(params) {
    return {
      validator: (rule, value, callback) => {
        const reg = new RegExp(`^[a-zA-Z0-9]{${params.min},${params.max}}$`);
        // 只限制字符长度
        // const reg = new RegExp(`^.{${params.min},${params.max}}$`);
        if (!value) {
          callback(new Error(`请输入${params.name}`));
        } else if (!reg.test(value)) {
          callback(new Error(`请输入${params.min}-${params.max}位大小写字母或者数字`));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    };
  }
},
……