iView UI FORM 动态添加表单项校验规则写法实例

 更新时间:2023年01月17日 09:44:07   作者:渐行渐远  
这篇文章主要为大家介绍了iView UI FORM 动态添加表单项校验规则写法实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

IView UI 表单验证 深入了解

在开发xxx需求中,有个交互是动态添加问题项,并需要做表单验证,在做动态表单验证的过程中遇到了问题,记录下这次是如何解决的。

一直以来对UI框架的form表单验证只局限于 在form 加上 model、rules 、在form-item加上prop,而且要prop要与modelrules的值对应,例如:

<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验证通过,false 验证不通过
      	});
      }
    }
  }
</script>

这里要model="questionFormData"指向对应数据对象,:rules="questionRules"指对应规则,prop="question"指对应的表单项的要验证的key(即questionFormData.question);以前只知道这么写就能触发验证规则,但是具体的原理不太清楚。

这次需要动态添加表单项,就是循环渲染FormItem,可问题来了,我要怎么去定义这个proprules,带着疑问,我查了一下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>
	export 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/components/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.prop;
    // 如果遇到:就替换为点,如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 {
      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
  };
 }

原来是通过.去分割为数据,数组的值以key的形式去访问model对象,匹配上对应的值。当匹配不上值是会抛出'[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 表单项校验规则的资料请关注脚本之家其它相关文章!

相关文章

  • Vue.js和Vue.runtime.js区别浅析

    Vue.js和Vue.runtime.js区别浅析

    这篇文章主要介绍了Vue.js和Vue.runtime.js区别浅析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue项目支付功能代码详解

    vue项目支付功能代码详解

    这篇文章主要介绍了vue项目支付功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • Vue 实现对quill-editor组件中的工具栏添加title

    Vue 实现对quill-editor组件中的工具栏添加title

    这篇文章主要介绍了Vue 实现对quill-editor组件中的工具栏添加title,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue 3.0如何配置TypeScript支持(推荐)

    Vue 3.0如何配置TypeScript支持(推荐)

    随着应用的增长,静态类型系统可以帮助防止许多潜在的运行时错误,这就是为什么Vue 3是用TypeScript编写的,本文给大家介绍Vue 3.0如何配置TypeScript支持,感兴趣的朋友一起看看吧
    2023-12-12
  • vue基于element-china-area-data插件实现省市区联动

    vue基于element-china-area-data插件实现省市区联动

    省市区联动在日常开发中用的非常多,本文就介绍一下vue基于element-china-area-data插件实现省市区联动,具有一定的参考价值,感兴趣的可以了解一下
    2022-04-04
  • vue3.2中的vuex使用详解

    vue3.2中的vuex使用详解

    这篇文章主要介绍了vue3.2中的vuex使用详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vue2使用TailwindCSS方法及遇到问题小结

    Vue2使用TailwindCSS方法及遇到问题小结

    Tailwind CSS是一个全新的、可定制的CSS框架,它提供了一系列的CSS类,用于构建现代化的Web界面,这篇文章主要介绍了Vue2使用TailwindCSS方法及遇到问题小结,需要的朋友可以参考下
    2024-03-03
  • vue下拉菜单组件(含搜索)的实现代码

    vue下拉菜单组件(含搜索)的实现代码

    这篇文章主要介绍了vue下拉菜单组件(含搜索)的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Vue3如何在setup中获取元素引用(ref)

    Vue3如何在setup中获取元素引用(ref)

    这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue3中nextTick()应用实例详解

    vue3中nextTick()应用实例详解

    这篇文章主要给大家介绍了关于vue3中nextTick()应用的相关资料,nextTick()等待下一次DOM更新刷新的工具方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12

最新评论