element plus 表单校验自定义校验

Element Plus是一个基于Vue.js的框架，提供了一套美观、易用的UI组件库。在Element Plus中，可以通过自定义校验规则来实现表单校验。

要实现自定义校验，可以使用Element Plus提供的ElForm组件的rules属性。rules属性是一个对象，其中的每个属性对应一个表单项的校验规则。

首先，需要定义一个自定义校验规则的函数。这个函数接受三个参数：rule、value和callback。其中，rule是当前校验规则的配置，value是当前表单项的值，callback是一个回调函数，用于返回校验结果。

下面是一个例子，演示如何实现一个自定义校验规则，要求输入的值必须是数字，并且大于10：

// 在Vue组件中定义校验规则
data() {
  return {
    rule: {
      customValidator: (rule, value, callback) => {
        if (value && isNaN(value)) {
          callback(new Error('请输入数字'))
        } else if (value <= 10) {
          callback(new Error('请输入大于10的数'))
        } else {
          callback()
        }
      }
    }
  }
},

然后，在表单项的校验规则中使用这个自定义校验规则：

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item label="数字" prop="number">
      <el-input v-model="form.number"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        number: ''
      },
      rules: {
        number: [
          { required: true, message: '请输入数字', trigger: 'blur' },
          { validator: this.rule.customValidator, trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

在上面的例子中，rules对象中的number属性对应的是表单项的校验规则。validator属性指定了使用的自定义校验规则函数。

这样，当用户在输入框中输入值并失去焦点时，校验规则函数会被调用，并根据输入值的不同情况，通过调用callback函数返回校验结果。

需要注意的是，自定义校验规则函数中，如果校验不通过，需要通过调用callback函数，并传递一个Error对象作为参数，来指示校验不通过的原因。

这就是使用Element Plus进行表单校验时，自定义校验规则的实现方法。可以根据具体需求，编写不同的自定义校验规则函数，来满足不同的校验要求