码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • element ui的动态校验的写法(变量动态校验,动态提示信息)与注意事项


    1. 使用变量动态检验必填

    1. rules: {// 表单校验
    2. uploadFile2: [{ required: this.file2IsRequired, message: '${this.upload.uploadTitle2}不能为空', trigger: 'change' }],
    3. ...
    4. },

    注意: 
    1. 必填项required的值可以动态设置 , 但是这个参数(例如file2IsRequired)必须定义在rules同级目录下(也就是this.file2IsRequired这样可以拿到),不能放到其他参数里面(例如this.xxx.file2IsRequired才能拿到),否则页面会报错。


    2. 提示信息也可以动态显示,但是提示信息的格式需要注意,如上,不能使用普通的字符串拼接,而是加上${}拼接上去),并且需要使用 ``符号,例如:`${this.xxx}不能为空`

    2. 使用自定义校验方法返回动态校验提示信息 message

    1. rules: {// 表单校验
    2. title: [{
    3. // { required: true, message: "邮件主题不能为空", trigger: "blur" }
    4. validator:(rule, value, callback)=>{
    5. if(value == null || value == '' ){ //如果是上传组件value一直为null ,因此无法这样写自定义校验
    6. callback(`${this.uploadTitle1}不能为空`);
    7. }
    8. },
    9. trigger: 'change'
    10. }],
    11. }

    注意:以上的写法可以动态显示提示信息,但是不适用于附件的校验,因为如果是上传附件validator的value永远都是null

    3. 使用自定义校验方法,自定义校验附件,并且返回动态的提示信息

    1. /** 提交按钮 */
    2. submitForm(op, optext) {
    3. this.$refs["form"].validate(valid => { //触发表单所有项的校验规则检查
    4. if (valid) { // 表单校验通过才执行
    5. this.$refs.uploadExcel1.submit(); //触发上传组件提交方法uploadFile(param)
    6. if(!this.validationFile()){//附件校验不通过就结束
    7. return;
    8. }
    9. }
    10. })
    11. }

    上传组件的写法请参考ElementUI的el-upload上传组件与表单一起提交遇到的各种问题以及解决办法(超详细,每个步骤都有详细解读)-CSDN博客

  • 相关阅读:
    Hive安装配置 - 本地模式
    网络编程中利用信号处理技术消灭僵尸进程
    PlaySound的同步播放与异步播放
    【已解决】 Expected linebreaks to be ‘LF‘ but found ‘CRLF‘.
    TCP/IP_第八章_静态路由_实验案例二
    OFDM 十六讲 5 -Discrete Convolution, ISI and ICI on DMT/OFDM Systems
    「学习笔记」FHQ-treap
    AMBA 总线历史
    11个精美网页——Web前端开发技术课程大作业,期末考试,Dreamweaver简单网页制作
    阿里云无影升级2.0 云电脑解决方案时代到来
  • 原文地址:https://blog.csdn.net/qq3892997/article/details/134336702
  • 最新文章
  • 【JVM】编译执行与解释执行的区别是什么?JVM 使用哪种方式?
    用 Hashids 优雅解决 C 端自增 ID 暴露问题
    V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容
    LLVM Pass快速入门(四):代码插桩
    milkup:桌面端 markdown AI续写和即时渲染
    基于项目工程构建SBOM(软件物料清单)的研究
    鸿蒙应用开发UI基础第二节:鸿蒙应用程序框架核心解析与实操
    .NET 中如何快速实现 List 集合去重?
    扣子Coze实战:从0到1打造抖音+小红书热点监控智能体
    浅谈数据访问层
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号