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

elementUI 上传upload组件和表单验证自定义验证规则

用户头像上传组件, 注意action路径问题,图片上传控制台报404错误,控制台 network选项卡查看请求。思考,发现请求路径不对,这里需要完整路径

el-upload 组件里的两个事件回调 图片上传之前验证图片,大小、格式 图片上传成功把服务器返回数据给表单

 

 

修改品牌名称 思考这里拷贝数据为什么要用浅拷贝,扩展运算符实现浅拷贝{...row},思考直接赋值与浅拷贝与深拷贝关系 为什么这里不能用直接赋值,会导致拷贝失败,引用对象与原对象联动修改

 

 

      表单验证   elementUI成熟组件,看文档即可学会 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可

 

 

表单验证规则   自定义校验规则 重点,注意自定义校验规则和rules的的书写位置

弹窗按钮发情求前需全部验证后通过,故需要在添加按钮的回调  外套一个表单全部通过验证,ref打点拿到需要验证的表单

注意,因为这里嵌套了验证函数,所以这里async标记需要套在就近的函数

 

 

 

 

 

 

 

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

相关推荐