ant-design-vue的form校验中清除校验不通过的提示语

最新推荐文章于 2025-02-10 14:44:54 发布

原创最新推荐文章于 2025-02-10 14:44:54 发布 · 3.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这里需要用到ant-design-vue之中的 clearValidate方法，该方法只清除校验结果提示语

当然resetFields也是可以清除的，但是resetFields在清除提示语的同时也会把对应的字段值给重置了

//清除全部校验提示语
formRef.value.clearValidate()
//清除表单之中某一项校验提示语
foemRef.value.clearValidate("name")//name指代你给formItem绑定校验规则时候的name名字

应用：

<a-form
    :model="formState"
     ref="formRef"
    :rules="formRules" 
       >

     <a-form-item
           label="最小级别"
          :wrapper-col="{ span: 18 }"
           name="minLevel"
                >
            <a-input
               autocomplete="off"
               v-model:value="formState.minLevel"
               type="textarea"
                  />
      </a-form-item>

      
      <a-form-item
           label="最大级别"
          :wrapper-col="{ span: 18 }"
           name="maxLevel"
                >
            <a-input
               autocomplete="off"
               v-model:value="formState.maxLevel"
               type="textarea"
                  />
      </a-form-item>

</a-form>


<script setup>
import {ref,reactive} from 'vue'
const formRef = ref(null)
const formState = reactive({
       minLevel:"1",
       maxLevel:"10",
})

const formRules = {

    minLevel: [
    {
      validator: (rule,value) => {
      
        if(value == '') {
          return Promise.reject('请输入必选项')
        }else if(value > formState.maxLevel) {
          return Promise.reject("最小级别不能大于最大级别")
        }else if(value <= formState.maxLevel) {
    //在自定义校验规则里面应用clearValidate方法，达到条件清除最大级别的校验提示语
          geoFormRef.value.clearValidate("maxLevel")
          return Promise.resolve()
        }else {
          return Promise.resolve()
        }
      },
      trigger: "change",
    },
  ],
}

</script>