微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

在前期博文《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>

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐