在 Element plus 中,除了对整个表单进行验证,还可以对单独的表单项进行验证。
查看 Form 文档,在 FormItem Exposes 节,可以看到 FormItem 提供了validate方法。该方法的使用方式与 Formrefvalidate方法基本相同,不同的就是需要获取 FormItemref

//javascript
const mobileRef = ref(null);

//template
...
<el-form-item prop="mobile" ref="mobileRef">...</el-form-item> 
...

接着,就能够调用该 ref 的 validate方法了:

//javascript
const submit = async () => {
    const result = await mobileRef.value.validate();
}

validate方法返回一个Promise,如果验证通过,上面代码中的result将会等于true。如果验证不通过,相应的表单将会显示在el-form上设置的rules中提供的报错信息。

End

标签: vue3, element-plus