VUE HUI開發中的表單驗證

2021-08-20 10:38:36 字數 1950 閱讀 1948

表單驗證是前端開發中比較重要的乙個環節, 作用是在防止使用者犯錯的前提下,盡可能讓使用者更早地發現並糾正錯誤,提交有效的表單。

在vue+hui 開發環境中,我們需要用到form 元件提供的表單驗證功能來實現表單驗證。

主要方法:

1.  通過 rule 屬性傳入約定的驗證規則

2.  將form-item 的 prop 屬性設定為需校驗的欄位名。

方法比較簡單,但是在實際操作中,有一些場景下的表單驗證比較靈活,api中提供的用法不夠參考。

例如:1.  通過v-for動態生成的表單

2.     自定義的表單

現將新增過程中的方法總結如下:

一.   基本的表單驗證新增 (必選.最小最大長度)

例: 新增資料字典

驗證規則

實現:(1)在data中定義驗證規則

(2) 在html元素上引用規則

注意:prop的命名必須嚴格對應v-model的命名,否則獲取不到值,規則不生效

二. 自定義的表單驗證

以密碼和確認密碼為例,密碼的新增因為涉及到安全紅線,所以新增起來相對複雜一點。總結乙個密碼的表單驗證和動態檢測密碼風險等級的新增過程,**中寫的不好之處還請指正。

例. 新建使用者新增密碼

驗證規則:

1.密碼與確認密碼相同

2.  包含數字,大寫,小寫字母,特殊字元中的至少3類

3.  密碼不能和使用者名稱正序和倒序相同

4.  必填

實現:(1)data中定義rule驗證規則

(2)在html元素上引用規則

(3)編寫自定義規則的方法

(4)監聽輸入值,得到使用者實時輸入的資料

(5)密碼風險計算

(6) 介面顯示

(7)完成效果

三.

動態表單驗證新增(通過v-for動態生成的表單元素)

例.如圖,新增人員證件資訊最多可加至20個,通過v-for動態生成

驗證規則:  0-64位的數字,英文本母,最多新增20個

實現:(1)data中定義驗證規則

(2)html中引用規則

對應的迴圈資料

(3)自定義規則

(4)完成

所有型別的表單驗證注意事項:

再次開啟對話方塊應將上次的校驗提示資訊清除;

清除方法:

zk開發 zk中的表單驗證 優化版

驗證表單 需要input元素的constraint屬性的支援 例如 年齡 param formcontainer input元素公共 return 如果驗證成功返回true,否則返回false public static boolean validateform component formcont...

Django中的Form表單驗證

前端有若干個input輸入框,將使用者輸入內容,以字典傳遞給後端。後端預先存在乙個form表單驗證的基類,封裝了乙個檢測使用者輸入是否全部通過的方法。該方法會先定義好錯誤資訊的字典,並會遍歷類的所有屬性 對應前端待驗證的輸入域 呼叫各自的驗證方法,將錯誤資訊 兩類,必要與否以及格式正確與否 存入字典...

SPA專案開發CRUD 表單驗證

spa實現crud可以使用elementui的元件來實現。總 搜尋 新增編輯 刪除取消 儲存所有的引數 export default editformvisible false,title editform rules title 在表單中新增乙個屬性然後定義即可 rules title 效果圖 搜...