（注：本文適用於有一定Vue基礎或開發經驗的讀者，文章就知識點的講解不一定全面，但卻是開發過程中很實用的）

 

  表單校驗是前端開發過程中最常用到的功能之一，根據個人的工作經驗總結在此對表單校驗功能的基礎用法進行整理說明~

 

如下代碼是Form表單校驗的demo示例：

 

 

代碼運行后會出現如下的彈框

 

首先對el-form標簽中的幾個關鍵屬性進行說明，

ref: 當前表單的唯一標識

model: 表單綁定的對象

rules: 字段校驗規則

 

而最關鍵的一點是el-form-item標簽中的prop屬性，屬性值必須與綁定的字段名稱保持一致。

rules字段用來定義各個字段具體的校驗規則，用法請查閱開篇的demo示例，其中required標識字段是否必填，message為校驗提示語，trigger為單個校驗觸發方式；也可以通過validator字段自定義校驗規則，方法validateProductName中對商品名稱做了判空及長度校驗，需要注意的是所有的條件分支都要做callback處理，否則校驗可能會導致異常。

 

上述所有配置完成后就可以進行表單校驗操作。

 

1、表單校驗

　　校驗方法如demo示例中的save方法所示。

　　如果只想對表單中的單個控件或部分控件進行校驗，可以調用以下方法

 　　this.$refs.form.validateField(‘productName’)

 　　其中參數為該控件上的prop屬性值；參數也可以是多個prop屬性值構成的數組，可以對包含的部分控件進行校驗。

 

　　校驗提示效果如下圖所示：

　　

 

2、重置表單

　　調用表單重置方法this.$refs.form.resetFields()實現。

　　當然像datetimerange類型的日期控件是無法通過該方法進行重置，必須手動重置綁定的字段。

 

3、清除校驗提示語

　　調用方法this.$refs.form.clearValidate()實現。

　　如果僅需要清除單個控件的提示語，只要把該控件對應的prop屬性值作為參數傳入即可。

　　還有另外一種方式就是在該控件對應的el-form-item標簽中增加ref屬性值，然后調用clearValidate方法。

 

    以上就是form表單校驗的基礎用法，在校驗規則rules里還有很多詳細的校驗屬性設置，想要有更多的了解可以自行查閱相關文檔，在此不做過多說明。