antd vue + ts（vue-property-decorator）表单至少二选一非空检验

表单验证：确保name或enName必填

最新推荐文章于 2024-12-09 17:12:50 发布

原创最新推荐文章于 2024-12-09 17:12:50 发布 · 815 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

9 篇文章

订阅专栏

该博客介绍了如何在Vue.js应用中使用A-Form-Model组件进行表单验证，确保`name`或`enName`字段至少有一个非空。通过在rules属性中使用逻辑运算符&&来动态添加required规则，并监听`addForm`对象的`name`和`enName`变化，触发校验以消除错误提示。

需求：name与enName至少二选一非空检验

<a-form-model
        ref="addForm"
        :model="addForm"
        :label-col="{ span: 24 }"
        :wrapper-col="{ span: 24 }"
        :rules="rules"
      >
        <a-form-model-item :label="$t('name')" prop="name">
          <a-auto-complete
            v-model="addForm.name"
            :data-source="dataSource"
            @select="nameSelect"
            @search="onNameSearch"
            @change="onAutoChange"
          />
        </a-form-model-item>
        <a-form-model-item :label="$t('enName')" prop="enName">
          <a-input v-model="addForm.enName" :disabled="isDisabled" />
        </a-form-model-item>
        <a-form-model-item :label="$t('email')" prop="email">
          <a-input v-model="addForm.email" :disabled="isDisabled" />
        </a-form-model-item>
        <a-form-model-item :label="$t('employeeType')" prop="employeeType">
          <a-select @change="handleChange" v-model="addForm.employeeType">
            <a-select-option value="供应商">
              {{ $t("supplier") }}
            </a-select-option>
            <a-select-option value="其他"> {{ $t("else") }} </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>

public get rules() {
    return {
      name: [
        {
          message: this.$tc("nameInvaild"),
          max: 50,
          min: 1,
          whitespace: true,
        },
        !this.addForm.enName && {
          required: true,
          message: this.$tc("nameTip"),
        },
      ],
      enName: [
        {
          message: this.$tc("enNameInvaild"),
          pattern: /^[a-zA-Z\s]{1,50}$/,
          whitespace: true,
        },
        !this.addForm.name && { required: true, message: this.$tc("nameTip") },
      ],
      email: [
        { required: true, message: this.$tc("emailInvaild"), type: "email" },
      ],
      employeeType: [{ required: true, message: this.$tc("pleaseSelect") }],
    };
  }

还需要监听一下change事件

@Watch("addForm.enName", { immediate: true, deep: true })
  public onEnNameChange(val): void {
    let item = this.$refs.addForm as any;
    item.validateField("name", (valid) => {});
  }

  @Watch("addForm.name", { immediate: true, deep: true })
  public onNameChange(val): void {
    let item = this.$refs.addForm as any;
    item.validateField("enName", (valid) => {});
  }

总结：采用 &&在rules里判断是否添加require,当某一项输入内容时，触发Watch校验另一项内容即可消除提示。