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

举报
SHQ5785 发表于 2020/12/29 22:48:46 2020/12/29
【摘要】 在前期博文《Vue进阶(三十):vue中使用element-ui进行表单验证》、《Vue进阶(幺幺叁):关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》、《Vue进阶(幺贰幺):表单校验注意事项》中主要讲解了form表单校验应遵守的约定及常见问题解决方法。在实现动态表单,且表单项为后台动态生成时,若...

在前期博文《Vue进阶(三十):vue中使用element-ui进行表单验证》、《Vue进阶(幺幺叁):关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》、《Vue进阶(幺贰幺):表单校验注意事项》中主要讲解了form表单校验应遵守的约定及常见问题解决方法。在实现动态表单,且表单项为后台动态生成时,若form表单属性不存在,但是在data中rules下定义了表单属性的校验规则,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>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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

文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。

原文链接:shq5785.blog.csdn.net/article/details/109056366

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200