ant-design-vue的form校验中清除校验不通过的提示语
ant-design-vue的form校验中清除校验不通过的提示语
·
这里需要用到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>
更多推荐
已为社区贡献2条内容
所有评论(0)