关于element表单验证问题(升级版)

阅读: 评论:0

关于element表单验证问题(升级版)

关于element表单验证问题(升级版)

关于element表单验证问题(升级版)-关于是否要显示表单前面的小红星

问题: 之前做项目的时候遇到个问题,编辑页和详情页使用同一页面,通过一个标识来判断是输入框还是显示详情,在只展示详情的时候默认没有表单验证(没有小红星)在点击编辑的时候切换成输入框模式,这时表单前需要显示小红星。这时需要对rules进行判断。
解决:在el-form-item里面单独写rules

   <el-form-item label="联系电话:" prop="contactNumber" :rules="this.isEditMode==actNumber:[{ required: false }]"><el-inputtype="text"v-model=&#actNumber":maxlength="11"placeholder="请输入联系电话..."size="small"v-if="isEditMode"></el-input><p v-else>{{actNumber}}</p></el-form-item>
   rules里面正常写,这时在详情页展示时前面没有小红星,在编辑页才有rules:{contactNumber: [{ required: true, message: "联系电话不能为空", trigger: "blur" },{required: true,message: "请填写正确的手机号码",pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0-9]|18[0-9]|19[89])d{8}$/,trigger: "blur"}],}


本文发布于:2024-01-29 19:12:40,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170652676017643.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:表单   升级版   element
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23