vxe-form自定义教研规则

vxe-form 是一个基于 Vue.js 的表单组件库，可以方便地实现表单的输入和校验功能。要自定义校验规则，可以通过设置 rules 属性来实现。具体步骤如下：

1. 在需要进行校验的表单项上添加 prop 属性，该属性值为校验规则的名称，例如：prop="username"。
2. 在表单的 data 属性中定义一个 rules 对象，该对象的属性名为校验规则的名称，属性值为一个数组，数组中每个元素为一个校验规则对象，校验规则对象包括 validator 和 message 两个属性，validator 是校验函数，message 是校验失败时的提示信息。例如：

data() {
  return {
    form: {
      username: '',
      password: ''
    },
    rules: {
      username: [
        { validator: this.checkUsername, message: '用户名不能为空' },
        { validator: this.checkUsernameLength, message: '用户名长度不能超过10个字符' }
      ],
      password: [
        { validator: this.checkPassword, message: '密码不能为空' }
      ]
    }
  }
},
methods: {
  checkUsername(rule, value, callback) {
    if (!value) {
      callback(new Error('用户名不能为空'))
    } else {
      callback()
    }
  },
  checkUsernameLength(rule, value, callback) {
    if (value.length > 10) {
      callback(new Error('用户名长度不能超过10个字符'))
    } else {
      callback()
    }
  },
  checkPassword(rule, value, callback) {
    if (!value) {
      callback(new Error('密码不能为空'))
    } else {
      callback()
    }
  }
}

3. 在表单项的验证属性中设置 rules 属性，该属性值为要使用的校验规则的名称，例如：rules="username"。

这样就可以实现自定义校验规则了。需要注意的是，校验函数的参数中 callback 函数用于返回校验结果，如果校验成功，应该调用 callback()，如果校验失败，应该调用 callback(new Error('提示信息'))。