首页 > 其他分享 >Vue进阶(幺叁柒):动态表单校验

Vue进阶(幺叁柒):动态表单校验

时间:2023-06-22 11:06:13浏览次数:47  
标签:Vue 进阶 校验 表单 oponionArr message

在前期博文《Vue进阶(三十):vue中使用element-ui进行表单验证》、《Vue进阶(幺幺叁):关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》、《Vue进阶(幺贰幺):表单校验注意事项》中主要讲解了form表单校验应遵守的约定及常见问题解决方法。在实现动态表单,且表单项为后台动态生成时,若form表单属性不存在,但是在datarules下定义了表单属性的校验规则,IE下就会给出相应的错误提示:"please transfer a valid prop path to form item" 在这里插入图片描述

那么,就需要通过更换表单校验方式来解决。 可直接在<el-form-item>中添加rules

<!--处理建议-->
<el-form-item :label="$t('pendingInfo.processInfo.lettopin')" prop="lettopin" v-if="oponionArr.length > 1 && oponionArr[1].isdisplay === '1'"
     :rules="[{required: oponionArr.length > 1 && oponionArr[1].isinput === '1', message: $t('flowManage.ChgOprPsn.message.plsApprOpropin'), trigger: 'blur'},
               {min: 0, max: 1000, message: $t('gplssignal.message.maxthousand'), trigger: 'blur'}]">
<cc-input type="textarea" :rows="4" style="width: 77%; word-break: break-all;"
   v-model="formCommit.lettopin" :placeholder="$t('flowManage.ChgOprPsn.message.inputContent')"
   :maxlength="1000"
   @blur="formCommit.lettopin = formCommit.lettopin.trim()">
</cc-input>

以上便实现了动态表单下表单属性校验。

标签:Vue,进阶,校验,表单,oponionArr,message
From: https://blog.51cto.com/shq5785/6534411

相关文章

  • Vue(二):指令语法之v-bind
    一、什么是指令语法vue中模板语法有两大类,第一类是插值语法,第二类就是指令语法。1.插值语法插值语法在上一篇“vue的简单使用”中已经提到了。功能:用于解析标签体的内容写法:{{XXX}},XXX为js表达式2.指令语法功能:用于解析标签(包括标签属性、标签事件、标签体内容等)本文来学......
  • 【技术积累】Vue.js中的基础概念与语法【一】
    写在前面学习Vue之前最好有前端三驾马车的基础【HTML+CSS+JavaScript】笔者接了一个从头开发的Vue项目,由于公司急着要,没有时间慢慢像在学校里学了,只能边学边做,现在项目雏形已经做的差不多了,因此正好以自己的方式来写笔记笔者接项目的时候Vue零基础,前端基础也是除了div几个标签......
  • Vue(一):简单使用
    1.引入js要对vue进行使用,首先要引入相关的js文件:<scripttype="text/javascript"src="../js/vue.js"></script>此处我将vue.js下载到了本地进行引用。2.准备容器<!--容器--><divid="root"><h1>Hello,{{name}}</h1>......
  • vue+axios实现token无感刷新
    原文出处:https://www.jb51.net/javascript/286094r4h.htm 通常,对于一些需要记录用户行为的系统,在进行网络请求的时候都会要求传递一下登录的token。不过,为了接口数据的安全,服务器的token一般不会设置太长,根据需要一般是1-7天的样子,token过期后就需要重新登录。不过,频繁的登录会......
  • 手把手教你在Windows下搭建Vue开发环境
    一、下载Note.js下载地址:https://nodejs.org/zh-cn/download 二、点击安装包无脑下一步即可(建议修改下路径)三、在选择的安装路径下创建两个文件夹node_cache和node_global 四、打开CMD,设置缓存路径和全局模块存放路径4.1 缓存路径npmconfigsetcache"D:\So......
  • Vue / uniapp cart.js购物车
     constcart={namespaced:true,state:{//{"store_id":"","goods_id":"","goods_name":"","goods_price":"","goods_count":"","......
  • vue3 虚拟滚动的一些实践
    看到这个vueuse库打开新天地后,看到一句warning:Considerusing vue-virtual-scroller instead,ifyouarelookingformorefeatures.于是用起来。好用,前提是看懂文档业务需要使用grid,它的grid竟然不是css,而是js计算//tempalte<RecycleScroller:ref="(el)......
  • vue3 - onMounted 多次触发 - 解决
    1.原因<router-view>外面使用了 <keep-alive>导致多次触发 onMounted生命周期2.解决使用<keep-alive>的第一层页面初始化数据的生命周期应该放弃使用 onMounted 应该使用onActivated用法与 onMounted 是一样的 ......
  • 自动化平台总结(httprunner+djangorestframework+python3+Mysql+Vue)【基础构思】
    一、前言最近从零搭建了一个自动化测试平台,虽然不是第一次从零搭建,但是也从来没有进行过这类搭建的总结,还是记录一下,搭建过程中的一些问题和方法。方便以后总结和翻阅二、简介搭建的平台使用的是Python3.6,未来有空可能考虑加个java版本。前端用的Vue,主体是httprunner2.......
  • Vue的set主要是做什么的
    这个时候可以用this.$set(),给新添加的对象属性,或数组元素添加getter,setter方法简单说即是:当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到this.$set()这个方法了methods:{btn(){Vue.set(this.student,'age......