今天看文檔的時(shí)候
發(fā)現(xiàn)還給我們提供了高階組件陵珍,就是表單比較簡單的時(shí)候可以使用粹污,也可以和組合式api結(jié)合使用拂玻,
最簡單的示例,從依賴中導(dǎo)入了三個(gè)組件from field ErrorMessage取募,然后指定name字段名琐谤,然后自定義了一個(gè)校驗(yàn)函數(shù)沒有值的時(shí)候提示必填
也可以使用yup這個(gè)非常優(yōu)秀的校驗(yàn)庫對(duì)我們上一個(gè)示例中的自定義函數(shù)做替換
更加簡單了,具體可以看yup文檔里面有很多校驗(yàn)函數(shù)玩敏,也可以自定義斗忌。
表單級(jí)別驗(yàn)證
vee-validate支持使用schema事先定義字段上的所有驗(yàn)證,這樣就不必在字段上單獨(dú)定義驗(yàn)證旺聚。如果正在創(chuàng)建大型表單织阳,并希望模板更簡潔,那么表單級(jí)驗(yàn)證就非常方便了砰粹。一個(gè)簡單的驗(yàn)證模式可以是一個(gè)對(duì)象唧躲,其中包含作為鍵的字段名和作為鍵值的驗(yàn)證函數(shù):
可以自定義校驗(yàn)邏輯
也可以結(jié)合yup使用
默認(rèn)情況下校驗(yàn)器會(huì)在這些情況下執(zhí)行
1.字段值更改后
發(fā)送/發(fā)出更改事件時(shí)
外部更改值(通過model update或其他)
2.規(guī)則更改后
僅在字段之前已通過用戶交互驗(yàn)證的情況下
3.失去焦點(diǎn)
已經(jīng)發(fā)出blur事件
4.提交表單后
自定義校驗(yàn)觸發(fā)器
默認(rèn)情況下會(huì)給字段添加多個(gè)事件監(jiān)聽器
1.input?
2.change
3.blur
4.update:modelValue
可以使用configure函數(shù)對(duì)這些配置進(jìn)行設(shè)置
也可以針對(duì)某一個(gè)field單獨(dú)的配置
如果我們有更加靈活的需求也可以通過scope-slot拿到prop綁定到我們需要的組件或者事件里
通過組件包裹我們自己的input然后綁定里面的屬性
還可以通過設(shè)置validate-on-mount屬性讓表單或者某個(gè)和組件掛載好就立馬觸發(fā)校驗(yàn)
也可以針對(duì)是否觸發(fā)校驗(yàn)對(duì)函數(shù)進(jìn)行配置
下篇文章繼續(xù)說明如何展示錯(cuò)誤信息