Naive组件-表单的验证 只验证表单的部分规则 单项校验某个表单项

合集 - Naive组件(3)

1.Naive组件-表单的验证 只验证表单的部分规则 单项校验某个表单项2024-06-20

2.Naive组件-基础模态框带表单正则校验；父传子/子传父2024-06-193.Naive组件-table列表渲染时，内容要渲染多个值且包含图标2024-05-21

收起

表单的规则可以只写在表单项上 表单校验可以多个判断

<n-form-item  path="data" :label="$t('Date')" :rule="dataRule">
        <n-select :disabled="props.mode === '编辑' ||(props.mode === '添加' && dialogTableData.length > 0)"
          :style="{ width: '200px' }"
          :clearable="true"
          :placeholder="$t('selectDate')"
          v-model:value="addScheduleWeek"
          :options="weekOption"
        />
</n-form-item>

  const dataRule = {
    key: 'week',
    trigger: ['change', 'blur'],
    required: true,
    validator() {
      if (!addScheduleWeek.value) {
        return new Error($t('selectDate'));
      } else if (
        props.weeks?.includes(addScheduleWeek.value) &&
        props.mode !== '编辑'
      ) {
        return new Error($t('currentDateExistCanNotSelect'));
      }
    },
  };

在验证的过程中，你可能并不总想验证全部的表单项，你可以使用 form.validate 的第二个参数控制应用的规则。

    formRef.value.validate(
      (error: any) => {
        if (error) {
          console.log('error');
        } else {
           console.log('success');
      },
      (rule: { key: string }) => {
        // 验证除key为week以外的其他表单项
        return rule?.key !== 'week';
      },
    );

单个校验week的表单项

    function validateForm() {
      return formRef.value.validate(
        (error: any) => {},
        (rule: { key: string }) => {
          return rule?.key === 'week';
        },
      );
    }