目錄

一.案例1：給下面的表單添加校驗

1.目的要求

2.步驟

①給需要校驗的el-form-item項，添加prop屬性

②定義一個表單校驗對象，里面存放了每一個prop的檢驗規則

③給el-form組件，添加:rules屬性

④給el-form組件，添加ref屬性，以便后面獲取表單實例

⑤在代碼中，定義該表單實例

⑥點擊【確認添加】按鈕時，通過表單實例查看表單是否符合校驗規則。如果符合，則向后端發送請求；如果不符合，則不發送請求并提示相關信息

3.效果展示

4.注意事項

5.結合已寫好的后端接口，展示整體效果

二.上述例子存在的問題

1.當取消對話框后，再打開對話框，表單的校驗狀態依然存在

2.對于上述案例的金額一項，校驗不充分

結語

---

一.案例1：給下面的表單添加校驗

1.目的要求

2.步驟

①給需要校驗的el-form-item項，添加prop屬性

②定義一個表單校驗對象，里面存放了每一個prop的檢驗規則

//表單檢驗規則  
const rules = ref({name: [{ required: true, message: '請輸入醫技項目名稱', trigger: 'blur' },//類型為輸入框時，觸發校驗的時機應該是blur：失去焦點],unit: [{ required: true, message: '請選擇單位', trigger: 'change' },//類型為選擇框時，觸發校驗的時機應該是change:選項改變],price: [{ required: true, message: '請輸入單價', trigger: 'blur' },],expTypeId: [{ required: true, message: '請選擇費用類型', trigger: 'change' },],deptId: [{ required: true, message: '請選擇執行科室', trigger: 'change' },],recordType: [{ required: true, message: '請選擇項目類型', trigger: 'change' },],}
)

③給el-form組件，添加:rules屬性

④給el-form組件，添加ref屬性，以便后面獲取表單實例

⑤在代碼中，定義該表單實例

//獲取表單組件的引用
const itemDtoRef = ref();//該變量名必須等于el-form的ref屬性值，才能獲取到表單實例。

⑥點擊【確認添加】按鈕時，通過表單實例查看表單是否符合校驗規則。如果符合，則向后端發送請求；如果不符合，則不發送請求并提示相關信息

3.效果展示

校驗沒通過時：

校驗通過時：

4.注意事項

①prop如何命名？【十分重要】

el-form-item的prop屬性，應當依據要提交的對象來決定，如下：

②表單實例（即表單的ref屬性值對應的對象，此處為itemDtoRef?）有很多方法，如下：

5.結合已寫好的后端接口，展示整體效果

將后端邏輯相關代碼，添加到下面的地方：

展示完整效果：

二.上述例子存在的問題

1.當取消對話框后，再打開對話框，表單的校驗狀態依然存在

問題如下：

解決方案：在對話框的關閉事件中，使用表單實例的clearValidate方法，將表單的校驗狀態清空即可。如下：

展示改進后的效果：

2.對于上述案例的金額一項，校驗不充分

問題描述：對于上述案例中，我們只校驗了【單價】是否為空，顯然這是不充分的，而是還需要驗證單價：是否是數字、不能是負數、不能以0開頭、最多有兩位小數。

實現步驟：

①自定義【單價】的校驗規則

//自定義校驗規則(校驗【單價】)
const validateAmount = (rule, value, callback) => {if (value === '' || value === undefined || value === null) {callback(new Error('金額不能為空'));return;}// 校驗是否為數字if (isNaN(value)) {callback(new Error('金額必須為數字'));return;}// 校驗是否為負數if (Number(value) < 0) {callback(new Error('金額不能為負數'));return;}// 校驗是否以 0 開頭（除非金額為 0）if (value !== '0' && value.startsWith('0')) {callback(new Error('金額不能以 0 開頭'));return;}// 校驗小數位數（如最多 2 位小數）const decimalPart = value.toString().split('.')[1];if (decimalPart && decimalPart.length > 2) {callback(new Error('金額最多保留 2 位小數'));return;}// 校驗通過callback();
};

?②將上述【單價】的自定義校驗規則，添加到表單校驗規則rules中的單價屬性中。

效果展示：

結語

以上就是表單校驗的基本流程介紹，還算比較詳細。

若有不懂的地方，可以私信博主（有空就會回復ou）。

喜歡本篇文章的話，可以留個免費的關注~~