本篇文章給大家分享的是有關(guān)Vue-Ant Design Vue-實現(xiàn)自定義校驗，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、資源網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、資源網(wǎng)絡(luò)營銷、資源企業(yè)策劃、資源品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學生創(chuàng)業(yè)者提供資源建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：sd-ha.com

Ant Design Vue

Ant Design Vue是 Ant Design 3.X 的 Vue 實現(xiàn)，開發(fā)和服務(wù)于企業(yè)級后臺產(chǎn)品。在GitHub上可以找到幾個Ant Design的Vue組件。不過相比較而言，Ant Design Vue更勝一籌。Ant Design Vue共享Ant Design of React設(shè)計工具體系，實現(xiàn)了所有Ant Design of React的組件，支持現(xiàn)代瀏覽器和 IE9 及以上（需要 polyfills）?？梢宰屖煜nt Design的在使用Vue時，很容易的上手。

nodejs，npm包括Ant Design Vue安裝什么的就不說了，可以百度，之后有時間我會寫一篇關(guān)于這一套東西的安裝教程，關(guān)于Ant Design Vue，可以直接查看官方文檔：https://vue.ant.design

下面說一下關(guān)于Ant Design Vue中的表單校驗及自定義校驗。

自定義校驗

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

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

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

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

help：設(shè)置校驗文案。

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

this.form 提供的 關(guān)于校驗的API如下 ：

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

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

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

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

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

實例

寫一個簡單的例子

form表單代碼：

<a-form  @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>

新聞標題：Vue-AntDesignVue-實現(xiàn)自定義校驗-創(chuàng)新互聯(lián)
當前URL：http://sd-ha.com/article32/deipsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、靜態(tài)網(wǎng)站、全網(wǎng)營銷推廣、自適應(yīng)網(wǎng)站、微信公眾號、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)