您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)Vue-Ant Design Vue-實現(xiàn)自定義校驗,小編覺得挺實用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
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è)置校驗文案。
說明一點: 當(dāng)你使用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 類似,當(dāng)需要錯誤信息和提示文案同時出現(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>
進行一下說明,以確認密碼的校驗為例:
<a-input v-decorator="[ 'confirm_password', {rules: [{ required: true, message: '請輸入確認密碼' },{validator: handleConfirmPass}]} ]" name="confirm_password" />
rules中為一個數(shù)組,每一項就是一個校驗規(guī)則,第一項規(guī)則容易理解,但是{validator: handleConfirmPass}是什么的,我們通過上面的校驗規(guī)則設(shè)置(紅框處)可以發(fā)現(xiàn),這是當(dāng)你設(shè)置自定義校驗的時候需要這么寫。注意: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 無法響應(yīng) callback() }, handleSubmit (e) { e.preventDefault() this.form.validateFields((err, values) => { if (!err) { console.log(values) } }) } } } </script>
效果圖如下:
1.空值提交
2.自定義校驗規(guī)則生效
好了,這就是關(guān)于Ant Design Vue的普通及自定義校驗的簡單使用。
補充知識:關(guān)于 Ant Design of Vue 表單動態(tài)賦值 觸發(fā)驗證 問題
關(guān)于 Ant Design of Vue 表單動態(tài)賦值 觸發(fā)驗證
Ant Design of Vue 中 給表單動態(tài)賦值 使用 setFieldsValue 方法 這一點 之前已經(jīng)介紹過了 ,不了解的可以查找我之前的博客 上面有詳細的介紹使用方法
但使用 該方法可能會出現(xiàn) 一個問題 例如本人使用的下拉框觸發(fā) change 事件的時候 給表單 動態(tài)賦值
這個時候遇到一個問題 就是 觸發(fā)的同時也觸發(fā)了表單驗證 解決的方法是 在setFieldsValue 方法的外面
加上 this.$nextTick(() => {}) 方法 如圖所示
輕松解決 問題 。
以上就是Vue-Ant Design Vue-實現(xiàn)自定義校驗,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。