ANTDV Форма Динамическая проверка правил

Ant Design

Проверка динамического правила формы

С помощью директивы v-decorator, которая поставляется с компонентом form a-form, вы можете легко проверять элементы формы и отслеживать событие изменения.

<a-form-item>
  <a-input v-decorator="formItems.username.decorator" />
</a-form-item>

// vue data
this.formItems.username = [
  'username',
  {
    rules: [
      {
        required: true,
        message: '请输入用户名',
      },
    ],
  },
];

Но вы можете столкнуться с некоторыми элементами формы в формевыбрать один из двухситуация с проверкой. Например: следующий пример регистрации формы (можно указать только одно имя пользователя или адрес электронной почты)

В это время необходимо удалить проверку почтового ящика после того, как пользователь введет имя пользователя, в противном случае, когда пользователь входит в почтовый ящик, удалить проверку имени пользователя. В то же время, если оба введены, необходимо поддерживать соответствующую логику проверки.

Как этого добиться? Вот соответствующие детали:

1. Как собрать значения формы?

Используя метод validateFields, объект values ​​в его внутреннем обратном вызове является значением всех входов в текущей форме:

this.form.validateFields((err, values) => {
  if (!err) {
    this.$message.info('提交成功');
  }
});

2. Как собрать указанные элементы формы?

Вышеупомянутый метод использовался для сравнения, но у него есть деталь, которую можно добавить в первый список параметров метода обратного вызова.fieldNamesСвойство массива, используемое для настройки полей, которые необходимо проверять и собирать.

Function([fieldNames: string[]], [options: object], callback: Function(errors, values))

this.form.validateFields(this.formFields, (err, values) => {
  //...
});

3. Как в итоге сделать его динамичным?

То есть: изменить A, B не требуется, изменить B, A не нужно.

При создании объекта формы установите событие свойства слушателя значения формы onValuesChange:

this.$form.createForm(this, { onValuesChange: this.onValuesChange });

В событии onValuesChange динамически обновите поле formFields в соответствии с логикой и, наконец, передайте formFields в validateFields:

// 监听表单字段值的更新
onValuesChange(props, value, values) {
    const formFields = this.initFormFields();
    // 根据字段逻辑，移除对应字段校验
    if (values.username && !values.email) {
        props.form.resetFields(['email']);
        formFields.splice(formFields.indexOf('email'), 1)
    } else if (!values.username && values.email) {
        props.form.resetFields(['username']);
        formFields.splice(formFields.indexOf('username'), 1)
    }
    this.formFields = formFields;
}

визуализация

Там много ерунды, а тут я нашел способ попроще

«Записать вживую» определение директивы v-decorator:

buildDecorator(id, options) {
    const formValues = this.form2.getFieldsValue()
    if (id == 'username') {
    options.rules[0].required = !formValues.email
    }
    if (id == 'email') {
    options.rules[0].required = !formValues.username
    }
    return [id, options]
}

Каждый раз, когда данные обновляются, запускается команда для вызова метода buildDecorator, значение формы получается внутри в режиме реального времени, а правила динамически изменяются для достижения вышеуказанного эффекта.

Кроме того, это будет иметь следующие преимущества:

  • Код может реализовать больше сценариев (например: объединение API-интерфейсов, связанных с формами, реализация привязки значений форм, адаптация к более сложным правилам бизнес-проверки).
  • Знак * в левой части этикетки также становится динамическим.
  • Нет необходимости поддерживать свойство fieldNames в методе обратного вызова validateFields.

визуализация

наконец

С помощью последнего метода в принципе можно справиться со сложной логикой проверки в запросе, а автономные люди могут выполнять более сложную инкапсуляцию объектов для повышения практичности.

Примечание. Приведенный выше код используется для описания демонстрационного примера, извините за невнимание.

В этой статье используетсяmdniceнабор текста

Категории