elementui自定义表单验证规则

要自定义表单验证规则，你可以使用 Element UI 提供的 Validator 组件。下面是一个示例，展示了如何自定义一个手机号码的验证规则：

首先，你需要在表单中引入 Validator 组件：

<el-form :model="form" ref="form" :rules="rules">
  <!-- 表单项 -->
</el-form>

然后，在 Vue 的 data 中定义表单数据（form）和验证规则（rules）：

data() {
  return {
    form: {
      phoneNumber: '' // 手机号码表单项
    },
    rules: {
      phoneNumber: [
        { required: true, message: '手机号码不能为空', trigger: 'blur' },
        { validator: this.validatePhoneNumber, trigger: 'blur' }
      ]
    }
  }
},

接下来，你需要在 methods 中定义 validatePhoneNumber 方法，用于自定义手机号码的验证逻辑：

methods: {
  validatePhoneNumber(rule, value, callback) {
    const reg = /^1[3456789]\d{9}$/; // 手机号码的正则表达式

    if (reg.test(value)) {
      callback(); // 验证通过
    } else {
      callback(new Error('手机号码格式不正确')); // 验证失败，返回错误信息
    }
  }
}

最后，你可以在表单中使用手机号码的表单项，并且在提交表单时进行验证：

<el-form-item label="手机号码" prop="phoneNumber">
  <el-input v-model="form.phoneNumber"></el-input>
</el-form-item>

这样，你就可以自定义表单验证规则了。你可以根据自己的需求，定义更多的验证规则并应用到表单中的不同表单项上。