這段時間在使用Ant Design Vue進行專案的前端部分開發，進行一個記錄，分享…

Ant Design Vue

Ant Design Vue是 Ant Design 3.X 的 Vue 實現，開發和服務於企業級後臺產品。在GitHub上可以找到幾個Ant Design的Vue元件。不過相比較而言，Ant Design Vue更勝一籌。Ant Design Vue共享Ant Design of React設計工具體系，實現了所有Ant Design of React的元件，支援現代瀏覽器和 IE9 及以上（需要 polyfills）。可以讓熟悉Ant Design的在使用Vue時，很容易的上手。

nodejs，npm包括Ant Design Vue安裝什麼的就不說了，可以百度，之後有時間我會寫一篇關於這一套東西的安裝教程，關於Ant Design Vue，可以直接檢視官方文件：https://vue.ant.design

下面說一下關於Ant Design Vue中的表單校驗及自定義校驗。

自定義校驗

先給一張Ant Design Vue得form表單中不同型別的校驗場景圖，看看是否有你需要的：

官方提供了 validateStatus,help,hasFeedback 等屬性，你可以不需要使用 Form.create 和 getFieldDecorator，自己定義校驗的時機和內容。

validateStatus: 校驗狀態，可選 ‘success',‘warning',‘error',‘validating'。

hasFeedback：用於給輸入框新增反饋圖示。

help：設定校驗文案。

說明一點： 當你使用Ant Design Vue的使用，經過 Form.create 包裝的元件將會自帶 this.form 屬性

this.form 提供的 關於校驗的API如下 ：

然後看下Form.Item的引數設定（主要看關於校驗的）：

最後是校驗規則設定:

相關的api及引數設定介紹完樂，下面上例項

例項

寫一個簡單的例子

form表單程式碼：

<a-form style="max-width: 500px; margin: 40px auto 0;" @submit="handleSubmit" :form="form">
<a-form-item
label="密碼"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
hasFeedback
>
<a-input
v-decorator="[
'password',{rules: [{ required: true,message: '請輸入密碼' },{validator: handlePass}]}
]"
name="password"
/>
</a-form-item>
<a-form-item
label="確認密碼"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
hasFeedback
>
<a-input
v-decorator="[
'confirm_password',message: '請輸入確認密碼' },{validator: handleConfirmPass}]}
]"
name="confirm_password"
/>
</a-form-item>
<a-form-item :wrapperCol="{span: 19,offset: 5}">
<a-button :loading="loading" type="primary" htmlType="submit">提交</a-button>
</a-form-item>
</a-form>

進行一下說明，以確認密碼的校驗為例：

<a-input
     v-decorator="[
     'confirm_password',{validator: handleConfirmPass}]}
    ]"
     name="confirm_password"
   />

rules中為一個數組，每一項就是一個校驗規則，第一項規則容易理解，但是{validator: handleConfirmPass}是什麼的，我們通過上面的校驗規則設定（紅框處）可以發現，這是當你設定自定義校驗的時候需要這麼寫。注意：callback 必須被呼叫。

handleConfirmPass 其實就是自定義校驗的校驗方法。

上js程式碼:

<script>
export default {
 data () {
  return {
   labelCol: {
    xs: { span: 24 },sm: { span: 7 }
   },wrapperCol: {
    xs: { span: 24 },sm: { span: 13 }
   },password: '',// form
   form: this.$form.createForm(this)
  }
 },methods: {
  handlePass(rule,value,callback){
   this.password = value
   callback()
  },handleConfirmPass(rule,callback){
   if (this.password && this.password !== value) {
    callback('兩次密碼輸入不一致！')
   }
   // Note: 必須總是返回一個 callback，否則 validateFieldsAndScroll 無法響應
   callback()
  },handleSubmit (e) {
   e.preventDefault()
   this.form.validateFields((err,values) => {
    if (!err) {
     console.log(values)
    }
   })

  }
 }
}
</script>

效果圖如下：

1.空值提交

2.自定義校驗規則生效

好了，這就是關於Ant Design Vue的普通及自定義校驗的簡單使用。

補充知識：關於 Ant Design of Vue 表單動態賦值 觸發驗證 問題

關於 Ant Design of Vue 表單動態賦值 觸發驗證

Ant Design of Vue 中 給表單動態賦值 使用 setFieldsValue 方法 這一點 之前已經介紹過了 ，不瞭解的可以查詢我之前的部落格 上面有詳細的介紹使用方法

但使用 該方法可能會出現 一個問題 例如本人使用的下拉框觸發 change 事件的時候 給表單 動態賦值

這個時候遇到一個問題 就是 觸發的同時也觸發了表單驗證 解決的方法是 在setFieldsValue 方法的外面

加上 this.$nextTick(() => {}） 方法 如圖所示

輕鬆解決 問題 。

以上這篇Vue-Ant Design Vue-普通及自定義校驗例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。