el-form组件自定义效验

在 Element UI 的 `el-form` 组件中进行自定义验证通常涉及使用 `rules` 属性来定义表单字段的验证规则。自定义验证可以通过编写验证函数来完成，这些函数需要返回一个布尔值或一个包含错误信息的对象。下面是一个自定义验证的例子：

export default {
  data() {
    return {
      // 表单数据
      form: {
        userName: '',
        age: '',
      },
      // 表单验证规则
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 自定义验证规则
          { validator: this.validateUserName, trigger: 'blur' },
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
        ]
      }
    };
  },
  methods: {
    // 自定义验证方法
    validateUserName(rule, value, callback) {
      if (value !== '允许的用户名') {
        callback(new Error('用户名验证失败'));
      } else {
        callback();
      }
    }
  }
}

在上述代码中，`validateUserName` 是自定义的验证函数，它接收三个参数：当前规则对象 `rule`，字段的值 `value`，以及一个用于通知验证结果的回调函数 `callback`。如果验证不通过，回调函数应该传入一个 `Error` 对象；如果验证通过，调用回调函数而不传递任何参数或传递 `undefined`。

使用这种方式，你可以为表单字段添加任何自定义的验证逻辑，以确保用户输入满足你的应用程序的要求。