Vue-AntDesignVue-實(shí)現(xiàn)自定義校驗(yàn)-創(chuàng)新互聯(lián)

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

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

Ant Design Vue

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

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

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

自定義校驗(yàn)

先給一張Ant Design Vue得form表單中不同類型的校驗(yàn)場(chǎng)景圖，看看是否有你需要的：

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

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

hasFeedback：用于給輸入框添加反饋圖標(biāo)。

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

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

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

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

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

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

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

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

實(shí)例

寫一個(gè)簡(jiǎn)單的例子

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: '請(qǐng)輸入密碼' },{validator: handlePass}]}
]"
name="password"
/>
</a-form-item>
<a-form-item
label="確認(rèn)密碼"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
hasFeedback
>
<a-input
v-decorator="[
'confirm_password',
{rules: [{ required: true, message: '請(qǐng)輸入確認(rèn)密碼' },{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>

新聞標(biāo)題：Vue-AntDesignVue-實(shí)現(xiàn)自定義校驗(yàn)-創(chuàng)新互聯(lián)
當(dāng)前URL：http://muchs.cn/article32/deipsc.html

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

廣告

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