封装hooks基本校验

export default function rulesHooks() {
  // 该项不能为空
  const checkNoEmpty = (rule, value, callback) => {
    if (!value && value !== 0) {
      return callback(new Error('该项不能为空'));
    }
    return callback();
  };
  // 必须是大于0的数字
  const checkNum = (rule, value, callback) => {
    if (!value && value !== 0) {
      return callback(new Error('该项不能为空'));
    }
    if (Number.isNaN(Number(value))) {
      return callback(new Error('请输入数字'));
    }
    if (Number(value) < 0) {
      return callback(new Error('该值必须大于0'));
    }
    return callback();
  };
  // 对身份证号进行校验
  const checkIdNum = (rule, value, callback) => {
    const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if (!value) {
      return callback(new Error('该项不能为空'));
    }
    if (!reg.test(value)) {
      return callback(new Error('证件号码不正确'));
    }
    return callback();
  };
  // 对手机号进行校验
  const checkPhone = (rule, value, callback) => {
    let regFormat = /^1[3-9]\d{9}$/; // 正确手机号
    if (!value) {
      return callback(new Error('该项不能为空'));
    }
    if (!regFormat.test(value)) {
      return callback(new Error('请输入正确手机号'));
    }
    return callback();
  };
  // select 多选
  const checkNoSelectEmpty = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('该项不能为空'));
    }
    if (value.length < 1) {
      return callback(new Error('该项不能为空'));
    }
    return callback();
  };
  // dateTime 校验
  const checkStartEndTime = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('该项不能为空'));
    }
    if (value.length === 0) {
      return callback(new Error('该项不能为空'));
    }
    return callback();
  };

  const noEmpty = {
    required: true,
    validator: checkNoEmpty,
    trigger: ['change', 'blur'],
  };
  const isNum = {
    required: true,
    validator: checkNum,
    trigger: ['change', 'blur'],
  };
  const idNum = {
    required: true,
    validator: checkIdNum,
    trigger: ['change', 'blur'],
  };
  const phone = {
    required: true,
    validator: checkPhone,
    trigger: ['change', 'blur'],
  };
  const noSelectEmpty = {
    required: true,
    validator: checkNoSelectEmpty,
    trigger: ['change', 'blur'],
  };
  const isStartEndTime = {
    required: true,
    validator: checkStartEndTime,
    trigger: ['change', 'blur'],
  };
  return {
    noEmpty,
    isNum,
    idNum,
    phone,
    noSelectEmpty,
    isStartEndTime,
  };
}

使用方法

// 直接在el-form-item 上使用:rules="noEmpty"
<el-form-item label="测试" prop="" :rules="noEmpty">
     <el-input  placeholder="请输入" />
</el-form-item>

// 引入hooks
import rulesHooks from '/@/hooks/rules';
// 结构使用
const { noEmpty } = rulesHooks();