Vue-Ant Design Vue-普通及自定義校驗實例

更新時間：2020年10月24日 10:07:48 作者：谷文杰

這篇文章主要介紹了Vue-Ant Design Vue-普通及自定義校驗實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

這段時間在使用Ant Design Vue進行項目的前端部分開發(fā)，進行一個記錄，分享…

Ant Design Vue

Ant Design Vue是 Ant Design 3.X 的 Vue 實現(xiàn)，開發(fā)和服務于企業(yè)級后臺產(chǎn)品。在GitHub上可以找到幾個Ant Design的Vue組件。不過相比較而言，Ant Design Vue更勝一籌。Ant Design Vue共享Ant Design of React設計工具體系，實現(xiàn)了所有Ant Design of React的組件，支持現(xiàn)代瀏覽器和 IE9 及以上（需要 polyfills）?？梢宰屖煜nt 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，自己定義校驗的時機和內(nèi)容。

validateStatus: 校驗狀態(tài)，可選 ‘success', ‘warning', ‘error', ‘validating'。

hasFeedback：用于給輸入框添加反饋圖標。

help：設置校驗文案。

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

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

方法	說明	類型
validateFields	校驗并獲取一組輸入域的值與 Error，若 fieldNames 參數(shù)為空，則校驗全部組件	Function([fieldNames: string[]], [options: object], callback: Function(errors, values))

然后看下Form.Item的參數(shù)設置（主要看關于校驗的）：

參數(shù)	說明	類型	默認值
extra	額外的提示信息，和 help 類似，當需要錯誤信息和提示文案同時出現(xiàn)時，可以使用這個。	string/slot
hasFeedback	配合 validateStatus 屬性使用，展示校驗狀態(tài)圖標，建議只配合 Input 組件使用。	boolean	false
help	提示信息，如不設置，則會根據(jù)校驗規(guī)則自動生成	string/slot
validateStatus	校驗狀態(tài)，如不設置，則會根據(jù)校驗規(guī)則自動生成，可選：‘success' ‘warning' ‘error' ‘validating'	string

最后是校驗規(guī)則設置:

相關的api及參數(shù)設置介紹完樂，下面上實例

實例

寫一個簡單的例子

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',
{rules: [{ required: true, 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',
     {rules: [{ required: true, message: '請輸入確認密碼' },{validator: handleConfirmPass}]}
    ]"
     name="confirm_password"
   />

rules中為一個數(shù)組，每一項就是一個校驗規(guī)則，第一項規(guī)則容易理解，但是{validator: handleConfirmPass}是什么的，我們通過上面的校驗規(guī)則設置（紅框處）可以發(fā)現(xiàn)，這是當你設置自定義校驗的時候需要這么寫。注意：callback 必須被調(diào)用。

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,value, 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.空值提交