iView UI FORM 動(dòng)態(tài)添加表單項(xiàng)校驗(yàn)規(guī)則寫法實(shí)例
IView UI 表單驗(yàn)證 深入了解
在開發(fā)xxx需求中,有個(gè)交互是動(dòng)態(tài)添加問題項(xiàng),并需要做表單驗(yàn)證,在做動(dòng)態(tài)表單驗(yàn)證的過程中遇到了問題,記錄下這次是如何解決的。
一直以來對(duì)UI框架的form表單驗(yàn)證只局限于 在form 加上 model、rules 、在form-item加上prop,而且要prop要與model、rules的值對(duì)應(yīng),例如:
<template>
<Form model="questionFormData" :rules="questionRules" refs="questionFormRefs">
<FormItem prop="question" lable="問題描述">
<Input v-model="questionFormData.question"></Input>
</FormItem>
</Form>
</template>
<script>
export default {
data() {
return {
questionFormData: {
question: ''
},
questionRules: {
question: [{
{ required: true, message: "不允許為空", trigger: "blur" },
}]
}
}
},
methods: {
handleSubmit() {
this.$refs[name].validate(async valid => {
// valid true驗(yàn)證通過,false 驗(yàn)證不通過
});
}
}
}
</script>
這里要model="questionFormData"指向?qū)?yīng)數(shù)據(jù)對(duì)象,:rules="questionRules"指對(duì)應(yīng)規(guī)則,prop="question"指對(duì)應(yīng)的表單項(xiàng)的要驗(yàn)證的key(即questionFormData.question);以前只知道這么寫就能觸發(fā)驗(yàn)證規(guī)則,但是具體的原理不太清楚。
這次需要?jiǎng)討B(tài)添加表單項(xiàng),就是循環(huán)渲染FormItem,可問題來了,我要怎么去定義這個(gè)prop和rules,帶著疑問,我查了一下iView官網(wǎng),在FORM下找到對(duì)應(yīng)例子
:prop="'items.' + index + '.value'"
:rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}"
原來可以動(dòng)態(tài)添加prop 和rules,只要將prop指向?qū)?yīng)的下標(biāo)即可,重新調(diào)整了一下代碼
<template>
<Form model="questionFormData" :rules="questionRules" refs="questionFormRefs">
<FormItem
v-for="(item, index) of questionFormData.questions"
:prop="'questions.' + index +'.question'"
:rules="{required: true, message: '問題' + (index + 1) + '不允許為空', trigger: 'blur'}"
:lable="'問題' + (index + 1) +'描述"
>
<Input v-model="questionFormData.question[index]"></Input>
</FormItem>
</Form>
</template>
<script>
export default {
data() {
return {
questionFormData: {
questions: [{
id: 1,
question: '問題1'
}, {
id: 2,
question: '問題2'
}],
},
questionRules: {
}
}
}
}
</script>
經(jīng)過上面的調(diào)整,動(dòng)態(tài)表單的驗(yàn)證也生效了,這里需要注意,prop的值必須是questionFormData的key,即questions.[index].question,如上面的第一項(xiàng)的prop的值questions.0.question,如果換成items.0.question就不生效了。會(huì)報(bào)[iView warn]: please transfer a valid prop path to form item!,意思是說,prop的值在questionFormData中找不到。
動(dòng)態(tài)表單的驗(yàn)證總算解決了,但是對(duì)questions.[index].question有些疑問,FormItem是如何識(shí)別字符串,并與questionFormData的值關(guān)聯(lián)起來的。帶著問題看一下<FormItem>源碼。
探究原理
找到FormItem源碼,路徑node_modules/view-design/src/components/form/form-item.vue,在源碼中找到答案:
computed: {
fieldValue () {
// FormInstance 是當(dāng)前Form的實(shí)例,獲取到model,也就是questionFormData
const model = this.FormInstance.model;
if (!model || !this.prop) { return; }
// 此處的prop 就是 questions.0.question
let path = this.prop;
// 如果遇到:就替換為點(diǎn),如questions:0.question -> questions.0.question
if (path.indexOf(':') !== -1) {
path = path.replace(/:/, '.');
}
// 獲取到questions.0.question在questionFormData的值
return getPropByPath(model, path).v;
},
},
function getPropByPath(obj, path) {
// tempObj = questionFormData
let tempObj = obj;
// 將中括號(hào)替換為. 如 questions[0][question] -> questions.0.question
path = path.replace(/\[(\w+)\]/g, '.$1');
// 替換首個(gè)., .questions.0.question -> questions.0.question 最終處理成這個(gè)格式
path = path.replace(/^\./, '');
// 分割成數(shù)組 得到 ['questions','0','question']
let keyArr = path.split('.');
let i = 0;
// 以 i = 0來查此處代碼作用
for (let len = keyArr.length; i < len - 1; ++i) {
// key = questions
let key = keyArr[i];
// questions 在 questionFormData中,進(jìn)入為true的代碼塊
if (key in tempObj) {
// tempObj = questions
tempObj = tempObj[key];
} else {
throw new Error('[iView warn]: please transfer a valid prop path to form item!');
}
}
return {
o: tempObj, // { id: 1, question: '問題1' }
k: keyArr[i], // question
v: tempObj[keyArr[i]] // 問題1
};
}
原來是通過.去分割為數(shù)據(jù),數(shù)組的值以key的形式去訪問model對(duì)象,匹配上對(duì)應(yīng)的值。當(dāng)匹配不上值是會(huì)拋出'[iView warn]: please transfer a valid prop path to form item!'錯(cuò)誤。
總結(jié):通過閱讀源碼,我們可以發(fā)現(xiàn)動(dòng)態(tài)添加校驗(yàn)規(guī)則不止可以用key.[index].key的方式,還可以通過[key][index][key]字符串的方式去定義prop,不過要注意**key要與model中的key一致**
以上就是iView UI FORM 動(dòng)態(tài)添加表單項(xiàng)校驗(yàn)規(guī)則寫法實(shí)例的詳細(xì)內(nèi)容,更多關(guān)于iView UI FORM 表單項(xiàng)校驗(yàn)規(guī)則的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue CLI 3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法
本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項(xiàng)目, 利用scp2自動(dòng)化部署到靜態(tài)文件服務(wù)器 Nginx。非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-04-04
Vue實(shí)現(xiàn)項(xiàng)目部署到非根目錄及解決刷新頁面時(shí)找不到資源
這篇文章主要介紹了Vue實(shí)現(xiàn)項(xiàng)目部署到非根目錄及解決刷新頁面時(shí)找不到資源問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入
本文主要介紹了element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
Vee-validate 父組件獲取子組件表單校驗(yàn)結(jié)果的實(shí)例代碼
vee-validate 是為 Vue.js 量身打造的表單校驗(yàn)框架,允許您校驗(yàn)輸入的內(nèi)容并顯示對(duì)應(yīng)的錯(cuò)誤提示信息。這篇文章主要介紹了Vee-validate 父組件獲取子組件表單校驗(yàn)結(jié)果 ,需要的朋友可以參考下2019-05-05
Vue.Draggable實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了Vue.Draggable實(shí)現(xiàn)拖拽效果,使用簡單方便 ,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06

