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