Form 組件提供了表單驗證的功能,只需要通過 rules
屬性傳入約定的驗證規則,并將 Form-Item 的 prop
屬性設置為需校驗的字段名即可。但是官網的示例只有普通日期類型的驗證,沒有時間范圍的驗證。
一開始,我認為時間時間范圍的是一個數組類型,驗證rule把type寫成array應該就可以了,但是試了一下卻不行。
代碼:
結果界面上還是提示驗證失敗:
網上查找了一下,也沒有找到解決辦法。看了一下官網文檔,表單支持自定義校驗規則,那么可以自己寫一個校驗規則,把上面的rule代碼改成下面這樣:
重點是validator:validatorDateRange這句,意思是使用自己定義的validatorDateRange校驗函數,函數定義如下:
在這個函數中就可以自己判斷數據是否正確,上面的代碼只是簡單判斷了值是否為空,嚴格一點還可以添加時間是否正確的檢查,最后運行效果如下:
不再提示時間不對了,完美運行。