步骤一：在src 创建一个文件夹，创建一个文件rules.js

步骤二：在utils/rules.js增加以下代码

// 验证手机号码
export function checkPhoneNumber(rule, value, callback) {
  const reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
  if (!value) {
    return callback(new Error('请填写手机号码！'))
  } else if (!reg.test(value)) {
    return callback(new Error('请填写正确的手机号码！'))
  }else{
    callback()
  }
}

export function checkIdNum(rule, value, callback) {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if (!value) {
    return callback(new Error('证件号码不能为空'))
  } else if (!reg.test(value)) {
    return callback(new Error('证件号码不正确'))
  } else {
    callback()
  }
}

export default {
  checkPhone: [{ required: true, validator: checkPhoneNumber, trigger: 'blur' }],
  checkId: [{ required: true, validator: checkIdNum, trigger: 'blur' }],
}

步骤三：页面上 import rules from ‘@/utils/rules’

    <el-form-item label="手机号码：" prop="phone" :rules="rulesUtils.checkPhone">
        <el-input
            v-model="ruleForm.phone"
            placeholder="请输入11位手机号码"
            maxlength = '11'
            clearable>
        </el-input>
    </el-form-item>
    <el-form-item label="身份证：" prop="phone" :rules="rulesUtils.checkId">
        <el-input
            v-model="ruleForm.Id"
            clearable>
        </el-input>
    </el-form-item>

 data() {
      return {
        rulesUtils: rules
        }
        }