VUE+ElementUI的表单el-from表单验证二选一必填项,并且满足条件后会清除表单验证提示。

效果图:VUE+ElementUI的表单el-from表单验证二选一必填项,并且满足条件后会清除表单验证提示。_第1张图片
使用Element-UI的自定义验证实现。
这里面有个坑是,两个input输入框都点出了提示信息,填写任一输入框之后只有操作的那一项的验证提示消失了,不主动清除另一项的验证提示就会一直存在,观感很不好。如图:
VUE+ElementUI的表单el-from表单验证二选一必填项,并且满足条件后会清除表单验证提示。_第2张图片
所以,在验证成功后要强制清除另一方的验证提示。本来应该分别清除的,我这里懒得写那么长了干脆一起清掉哈哈哈。
PS:本来应该用this.$nextTick(() =>{}在更新数据后立即调用的,但是不知道为啥我这用这个反而说没有clearValidate()这个方法。虽然没用上,但是下面的代码段还是保留了,看到这篇文章的UU都可以试试。
现在,填入其中一项效果如图:
VUE+ElementUI的表单el-from表单验证二选一必填项,并且满足条件后会清除表单验证提示。_第3张图片

HTML:

			<el-form
              ref="form"
              class="forminfo"
              :model="form"
              label-width="20%"
              :rules="rules"
            >
              <el-form-item
                ref="zhname"
                label="客户中文名称"
                prop="product_name_zh"
              >
                <el-input
                  v-model="form.product_name_zh"
                  style="width: 250px"
                  placeholder="中文名称和英文名称至少填写一项"
                />
              el-form-item>
              <el-form-item
                ref="enname"
                label="客户英文名称"
                prop="product_name_en"
              >
                <el-input
                  v-model="form.product_name_en"
                  style="width: 250px"
                  placeholder="中文名称和英文名称至少填写一项"
                />
              el-form-item>
             el-form>

JS:

export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (!this.form.product_name_zh && !this.form.product_name_en) {
        callback(new Error("请至少填写一项"))
      } else {
        //任意值被填写,清除验证提示
        if (!this.form.product_name_zh || !this.form.product_name_en) {
          // this.$nextTick(() => {
          //   this.$refs.zhname.clearValidate()
          // })
          this.$refs.zhname.clearValidate()
          this.$refs.enname.clearValidate()
        }
        callback()
      }
    }
    return {
      rules: {
        product_name_zh: [
          {
            required: true,
            validator: validateName,
            trigger: "change",
          },
        ],
        product_name_en: [
          {
            required: true,
            validator: validateName,
            trigger: "change",
          },
        ],
      },
    }
  },

你可能感兴趣的:(vue实用代码片段,前端功能实现,elementui,vue.js,html)