ant-desigin-vue中form表單的使用解讀
更新時(shí)間：2023年07月03日 10:04:21 作者：別樣紅。
這篇文章主要介紹了ant-desigin-vue中form表單的使用解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
ant-desigin-vue中form表單使用
form表單的使用
form表單之獲取表單的數(shù)據(jù)
創(chuàng)建表單
- 通過ant-design-vue去獲取表單的數(shù)據(jù)是使用v-decorator的方式去給每個(gè)項(xiàng)去注冊(cè)，這樣才能通過組件去拉取表單的數(shù)據(jù)，同時(shí)對(duì)必填項(xiàng)做校驗(yàn)；
<template>
? <a-form @submit="handleOk" :form="form">
? ? // :form="form" 必須優(yōu)先注冊(cè)
? ? <!-- 客戶姓名 -->
? ? <a-form-item
? ? ? ? :labelCol="labelCol" // 排列樣式
? ? ? ? :wrapperCol="wrapperCol"
? ? ? ? label='客戶姓名：'
? ? ? >
? ? ? <a-input
? ? ? ? v-decorator="[
? ? ? ? ? 'name', // 給表單賦值或拉取表單時(shí)，該input對(duì)應(yīng)的key
? ? ? ? ? {rules: [{ required: true, message: '請(qǐng)輸入客戶名稱!' }]}
? ? ? ? ]"
? ? ? ? placeholder="請(qǐng)輸入客戶名稱"/>
? ? </a-form-item>
? </a-form>
</template>
export default {
? data() {
? ? return {
? ? ? form: this.$form.createForm(this), // 只有這樣注冊(cè)后，才能通過表單拉取數(shù)據(jù)
? ? }
? }
}拉取表單數(shù)據(jù)的方法
- 通過validateFields的方法，能夠校驗(yàn)必填項(xiàng)是否有值，若無，則頁面會(huì)給出警告！
this.form.validateFields((err, values) => {
? if (err) {
? ? // 這里做邏輯處理
? ? console.log(values) // { name: '' }
? }
}清空表單的方法
- 執(zhí)行this.form.resetFields()，則會(huì)將表單清空。
給表單賦值
- 值得一提的是，setFieldsValue只有通過這種方式給表單賦值，拉取表單的時(shí)候才能拉取到值，其他設(shè)置默認(rèn)值的方式，拉取表單時(shí)都無法獲取到默認(rèn)值。
?this.form.setFieldsValue({
? ?name: '設(shè)置值'
?})給表單中添加自定義校驗(yàn)
- 現(xiàn)在給表單添加自定義校驗(yàn)的方式，是從你開始輸入時(shí)就在校驗(yàn)，討厭的警告一直存在，直到你輸入完整才會(huì)消失，個(gè)人覺得這種方式不太友好！
<a-form-item
? v-bind="formItemLayout"
? label="E-mail"
>
? <a-input
? ? v-decorator="[
? ? ? 'email',
? ? ? {
? ? ? ? rules: [{
? ? ? ? ? type: 'email', message: 'The input is not valid E-mail!',
? ? ? ? }, {
? ? ? ? ? required: true, message: 'Please input your E-mail!',
? ? ? ? }]
? ? ? }
? ? ]"
? />
</a-form-item>推薦使用下面的方式做自定義校驗(yàn)，當(dāng)輸入框失去焦點(diǎn)后再去校驗(yàn)是否正確
這種方法的思路是：
- 當(dāng)輸入框失去焦點(diǎn)時(shí)，校驗(yàn)是否為空同時(shí)是否匹配正則
- 給該單個(gè)輸入框設(shè)置錯(cuò)誤信息，并在頁面給出警告。
<a-form-item
? :labelCol="labelCol"
? :wrapperCol="wrapperCol"
? label='手機(jī)：'
>
<a-input
? type="number"
? v-decorator="[
? ? 'phone',
? ? {
? ? ? rules: [
? ? ? ? { required: false, message: '請(qǐng)輸入手機(jī)號(hào)碼!' },]
? ? },
? ]"
? @blur="validatePhoneBlur"
? placeholder='請(qǐng)輸入手機(jī)號(hào)碼' />
</a-form-item>
// 校驗(yàn)事件
validatePhoneBlur(e) {
? const validatePhoneReg = /^1\d{10}$/
? if (e.target.value && !validatePhoneReg.test(e.target.value)) {
? ? const arr = [{
? ? ? message: '您輸入的手機(jī)格式不正確!',
? ? ? field: 'phone',
? ? }]
? ? this.form.setFields({ phone: { value: e.target.value, errors: arr } })
? }
},使用ant-desigin-vue中form表單遇到的坑
form.validateFields() 不執(zhí)行
問題：
提價(jià)表單時(shí)，發(fā)現(xiàn)驗(yàn)證不通過時(shí)正常提醒，但驗(yàn)證通過后點(diǎn)擊提交又沒反應(yīng)。
最后發(fā)現(xiàn)是因?yàn)関alidateFields函數(shù)沒被執(zhí)行，通過一步步排查原來是字段驗(yàn)證的部分有問題。
const validateCode = (rule, value, callback) => {
if (value == '') {
callback(new Error('請(qǐng)輸入字典編號(hào)'));
}
else if(!/^[A-z0-9-_]+$/.test(value)){
callback(new Error('請(qǐng)輸入正確格式編號(hào)'));
}
else if(value.length>32){
callback(new Error('最大長(zhǎng)度為 32 個(gè)字符'));
}
};上面的代碼中，在字典編號(hào)格式驗(yàn)證通過后，沒有寫else，沒有任何動(dòng)作，當(dāng)然也沒有調(diào)用callback 。
可是在 antd 中明確寫到自定義校驗(yàn)（注意，callback 必須被調(diào)用） ，所以造成了悲劇。
既然問題找到了，哪就好解決了，接下來加入else判斷即可：
const validateCode = (rule, value, callback) => {
if (value == '') {
callback(new Error('請(qǐng)輸入字典編號(hào)'));
}
else if(!/^[A-z0-9-_]+$/.test(value)){
callback(new Error('請(qǐng)輸入正確格式編號(hào)'));
}
else if(value.length>32){
callback(new Error('最大長(zhǎng)度為 32 個(gè)字符'));
}
else{
callback()
}
};正好我的同事也遇到了相似的問題，我想著小露一手的時(shí)候到了。不出意外的話...意外就出現(xiàn)了。
先看一下代碼：
validatePhone(rule, value, callback) {
if (!value) {
callback()
} else {
if (new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)) {
var params = {
tableName: 'sys_user',
fieldName: 'phone',
fieldVal: value,
dataId: this.userId
}
duplicateCheck(params).then(res => {
if (res.success) {
callback()
} else {
callback('手機(jī)號(hào)已存在!')
}
})
} else {
callback('請(qǐng)輸入正確格式的手機(jī)號(hào)碼!')
}
}
}咋一看沒問題吧，每一個(gè)判斷下都有回調(diào)函數(shù)callback。離譜的是最后找了個(gè)把小時(shí)才發(fā)現(xiàn)原來是if判斷里有一個(gè)請(qǐng)求API（duplicateCheck）沒有引入，關(guān)鍵是還沒有任何報(bào)錯(cuò)提示。
總結(jié)：
- 檢查每一個(gè)判斷里是否調(diào)用了callback函數(shù)
- 如果判斷里發(fā)送了請(qǐng)求，一定記得提前引入API
表單驗(yàn)證 async-validator: ['xxx is not a string']
問題：
在方法校驗(yàn)的時(shí)候，會(huì)有一部分非 String 類型表單項(xiàng)提示校驗(yàn)未通過，console中顯示 async-validator: ["xxx is not a string"]。
解決：
- 去掉 :rules 規(guī)則中的 trigger 屬性即可；
- 如果是驗(yàn)證數(shù)字格式的，就設(shè)為type: 'number’。如：
Money: { rules: [{ required: true, type: 'number', message: '請(qǐng)輸入金額！', trigger: 'change' }] },總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2實(shí)現(xiàn)數(shù)字滾動(dòng)翻頁效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue2如何實(shí)現(xiàn)數(shù)字滾動(dòng)翻頁效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2024-03-03
本篇文章主要介紹了深入對(duì)Vue.js $watch方法的理解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧。2017-03-03
vue?element-plus中el-input修改邊框border的方法
element樣式還是蠻好的,只是有時(shí)候我們需要做一些調(diào)整,比如el-input的邊框,下面這篇文章主要給大家介紹了關(guān)于vue?element-plus中el-input修改邊框border的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue項(xiàng)目打包問題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過程中,項(xiàng)目的打包是一個(gè)非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包問題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Vue實(shí)例有一個(gè)完整的生命周期,也就是說從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載DOM、渲染-更新-渲染、銷毀等一系列過程,這篇文章主要介紹了Vue生命周期之從創(chuàng)建到銷毀的相關(guān)資料,需要的朋友可以參考下2026-03-03
vue實(shí)現(xiàn)html轉(zhuǎn)化pdf并復(fù)制文字
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)html轉(zhuǎn)化pdf的兩種方式,分別為能復(fù)制文字和不能復(fù)制文字的方法,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
今天小編就為大家分享一篇Vue刷新修改頁面中數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue SPA 首屏優(yōu)化方案的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了使用vant的地域控件追加全部選項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue.js框架實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了Vue.js框架實(shí)現(xiàn)購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06