a-form-model-item绑定多个自定义验证

在 Vue 中，我们可以通过自定义验证函数来实现对表单数据的验证。如果你想要在 `a-form-model-item` 组件中绑定多个自定义验证函数，可以像下面这样做：

<template>
  <a-form :model="form" :rules="rules">
    <a-form-model-item label="Username" prop="username">
      <a-input v-model="form.username" />
    </a-form-model-item>
    <a-form-model-item label="Password" prop="password">
      <a-input type="password" v-model="form.password" />
    </a-form-model-item>
    <a-form-model-item label="Confirm Password" prop="confirmPassword">
      <a-input type="password" v-model="form.confirmPassword" />
    </a-form-model-item>
    <a-form-model-item>
      <a-button type="primary" @click="submitForm">Submit</a-button>
    </a-form-model-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        confirmPassword: '',
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' },
          { min: 3, max: 20, message: 'Length should be 3 to 20', trigger: 'blur' },
          { validator: this.validateUsername, trigger: 'blur' },
        ],
        password: [
          { required: true, message: 'Please input password', trigger: 'blur' },
          { min: 6, max: 20, message: 'Length should be 6 to 20', trigger: 'blur' },
        ],
        confirmPassword: [
          { required: true, message: 'Please confirm password', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    validateUsername(rule, value, callback) {
      if (!/^[a-zA-Z0-9]+$/.test(value)) {
        callback(new Error('Username should only contain alphanumeric characters'));
      } else {
        callback();
      }
    },
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.form.password) {
        callback(new Error('Password confirmation does not match password'));
      } else {
        callback();
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // do something
        } else {
          console.log('validation failed');
        }
      });
    },
  },
};
</script>

在这个例子中，我们在 `rules` 对象中为 `username` 和 `confirmPassword` 字段绑定了多个验证函数。其中，`validateUsername` 和 `validateConfirmPassword` 方法分别用于验证用户名和确认密码。这些自定义验证函数会在表单数据发生变化时自动触发，并根据验证结果决定是否提示错误信息。

值得注意的是，每个验证函数都应该接受三个参数：`rule`、`value` 和 `callback`。其中，`rule` 表示当前验证规则的配置，`value` 表示当前输入框的值，`callback` 是一个回调函数，用于通知表单验证结果。如果验证通过，可以使用 `callback()` 或者不传参来通知验证成功；如果验证不通过，可以使用 `callback(new Error('message'))` 来通知验证失败，并显示错误提示信息。

最后，我们在提交表单时，调用 `this.$refs.form.validate` 方法来触发表单验证。如果验证通过，`valid` 参数的值会为 `true`，否则为 `false`。