IView UI 表单验证 深入 了解
在开发xxx需求中，有个交互是动态添加问题项，并需要做表单验证，在做动态表单验证的 过程中 遇到了问题，记录下这次是如何解决的。
一直以来对 ui框架 的form表单验证只局限于 在 form 加上 model、rules 、在 form -i tem 加上 PR op ，而且要 prop 要与 model 、 rules 的值对应，例如:
<template>
<Form model="questionFormData" :rules="questionRules" refs="questionFormRefs">
<Form IT em prop="question" lable="问题描述">
<Input v-model="questionFormData.question"></Input>
</FormItem>
</Form>
</template>
<script>
export default {
data() {
return {
questionFormData: {
question: ''
},
questionRules: {
question: [{
{ requi red : true, message: "不允许为空", trigger: "blur" },
}]
}
}
},
methods: {
handleS ub mit() {
this.$refs[n am e].validate(async valid => {
// valid true验证通过，false 验证不通过
});
}
}
}
</script>
这里要 model="questionFormData" 指向对应数据对象， :rules="questionRules" 指对应规则， prop="question" 指对应的表单项的要验证的 key (即 questionFormData.question )；以前只 知道 这么写就能触发 验证规则 ，但是具体的原理不太清楚。
这次需要动态添加表单项，就是循环渲染 FormItem ,可问题来了，我要怎么去定义这个 prop 和 rules ,带着疑问，我查了一下iView官网，在 FORM 下找到对应例子
:prop="'items.' + index + '.value'"
:rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}"
原来 可以动态添加 prop 和 rules ,只要将 prop 指向对应的 下标 即可，重新 调整 了一下代码
<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>
e xp ort default {
data() {
return {
questionFormData: {
questions: [{
id: 1,
question: '问题1'
}, {
id: 2,
question: '问题2'
}],
},
questionRules: {
}
}
}
}
</script>
经过上面的调整，动态表单的验证也 生效 了，这里需要注意， prop 的值必须是 questionFormData 的key，即 questions.[index].question ，如上面的第一项的 prop 的值 questions.0.question ，如果换成 items.0.question 就不生效了。会报 [iView warn]: please transfer a valid prop path to form item! , 意思 是说， prop 的值在 questionFormData 中找不到。
动态表单的验证总算解决了，但是对 questions.[index].question 有些疑问， FormItem 是如何识别字符串，并与 questionFormData 的值关联起来的。带着问题看一下 <FormItem> 源 码。
探究原理
找到 FormItem 源码，路径 node_modules /view-design/src/ component s/form/form-item.vue ,在源码中找到答案：
computed: {
fieldValue () {
// FormInstance 是当前Form的实例，获取到model，也就是questionFormData
const model = this.FormInstance.model;
if (!model || !this.prop) { return; }
// 此处的prop 就是 questions.0.question
let path = this.pro p;
// 如果遇到:就替换为点，如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;
// 将中括号替换为. 如 questions[0][question] -> questions.0.question
path = path.replace(/\[(\w+)\]/g, '.$1');
// 替换首个.， .questions.0.question -> questions.0.question 最终处理成这个格式
path = path.replace(/^\./, '');
// 分割成数组 得到 ['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中，进入为true的代码块
if (key in tempObj) {
// tempObj = questions
tempObj = tempObj[key];
} else {
t hr ow 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
};
}
原来是通过.去分割为数据，数组的值以key的形式去访问 model 对象，匹配上对应的值。当匹配不上值是会抛出 & # 39;[iView warn]: please transfer a valid prop path to form item!' 错误。
总结：通过阅读源码，我们可以发现动态添加校验规则不止可以用 key.[index].key 的方式，还可以通过 [key][index][key] 字符串的方式去定义 prop ， 不过 要注意** key 要与 model 中的 key 一致**
以上就是iView UI FORM 动态添加表单项校验规则写法实例的详细内容，更多关于iView UI FORM 表单项校验规则的资料请关注其它相关 文章 ！
您可能感兴趣的文章: Swift代码自定义UIView实现示例 Vuex,iView UI面包屑导航使用扩展详解 vue+iview/elementUi实现城市多选 详解基于iview-ui的导航栏路径（面包屑）配置 iOS中一行代码实现 UIView 镂空效果 iOS布局渲染之UIView方法的调用时机详解
总结
以上是 为你收集整理的 iView UI FORM 动态添加表单项校验规则写法实例 全部内容，希望文章能够帮你解决 iView UI FORM 动态添加表单项校验规则写法实例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于iView UI FORM 动态添加表单项校验规则写法实例的详细内容...