当前位置: 首页 > news >正文

封装的form表单,校验规则(rules)只在提交时触发,为空时点击提交触发,再次输入内容也不显示校验规则(rules)

  rules: [{required: true,message: '请输入审核备注',// 缺少trigger: ['submit']},// 缺少  { trigger: ['change']  }]

进入页面时点击“否”

当审核备注为空时点击“审核通过”,然后再重新输入“审核备注”

            rules: [{required: true,message: '请输入审核备注',trigger: ['submit']}// 缺少  { trigger: ['change']  }]

此种写法则所有的都正常

            rules: [{required: true,message: '请输入审核备注',trigger: 'submit' //只在提交时验证},{trigger: ['change'] // 输入变化时均验证}]
进入页面点击“否”

未输入内容点击审核通过

重新输入审核备注

以下为两个内容的全部代码

{field: 'customRefundAmount',label: '自定义退款金额',component: 'Input',hidden: false, // 默认不展示colProps: {span: 24},componentProps: {type: 'number' // 输入框类型设为number(基础限制)},formItemProps: {rules: [{required: true,message: '请输入自定义退款金额',trigger: 'submit'},{// 验证数字格式(整数或小数,支持0.00格式)pattern: /^\d+(\.\d+)?$/,message: '自定义退款金额不能为负数',trigger: ['change']},{validator: async (_rule, value, callback) => {// 获取表单实例与实付金额const write = await unref(writeRef)if (!write) {callback()return}const formData = await write.getFormData()const payAmount = Number(formData?.payAmount) || 0 // 转换为数字,默认0避免NaNconst currentValue = Number(value) || 0 // 输入值转换为数字if (currentValue > payAmount) {callback(new Error(`自定义退款金额不能大于实付金额${payAmount}`))return}callback() // 验证通过},trigger: ['change'] // 输入变化和提交时均验证}]}},{field: 'auditRemark',label: '审核备注',component: 'Input',componentProps: {type: 'textarea',rows: 3},formItemProps: {rules: [{required: true,message: '请输入审核备注',trigger: ['submit'] // 仅在提交时触发验证,避免进入页面就触发校验规则},{trigger: ['change'] // 输入变化和验证,避免先点按钮再输入内容时校验规则还在}]},colProps: {span: 24}}

http://www.dtcms.com/a/350062.html

相关文章:

  • 机器学习】(12) --随机森林
  • Day27 进程管理(PCB、状态、调度、原语与资源管理)
  • pikachu之Over permission
  • 基于SpringBoot的宠物领养系统的设计与实现(代码+数据库+LW)
  • QML中的Connections
  • Vue 3 defineOptions 完全指南:让组件选项声明更现代化
  • vb6编绎COM DLL(ACTIVEX对象)时兼容性设置
  • bisheng 后端初始化数据(main.py > init_data.py)
  • 25072班8.25日 数据结构作业
  • 04-Maven工具介绍
  • kafka 副本集设置和理解
  • 《Spring Boot 进阶:从零到一打造自定义 @Transactional》 ——支持多数据源、动态传播行为、可插拔回滚策略
  • AI系列 - Claude 与 Qwen 模型自动补全对比:谁更胜一筹?
  • 电力系统稳定性的挑战与智能控制新范式
  • 网络与信息安全有哪些岗位:(8)安全审计员
  • C 语言:第 20 天笔记:typedef(类型重命名规则、应用场景与实战案例)
  • 黑客窃取 EDR 检测未检测到的 Windows 机密和凭证
  • 讲解计网中OSI模型及各层作用
  • 网闸和防火墙各有什么长处?
  • ValueTask 实战指南:解锁 .NET 异步编程的性能秘密
  • maui中配置安卓手机在测试环境连接网络
  • 创建Java集成开发环境
  • 车载诊断架构 --- 基于以太网做software download的疑问汇总
  • [QMT量化交易小白入门]-八十四、LSTM模型对期货市场的秒级Tick数据进行预测
  • 14.examples\01-Micropython-Basics\demo_yield.py 加强版
  • 深入浅出 ArrayList:从基础用法到底层原理的全面解析(中)
  • 深度剖析 Grok2 开源:技术原理与创新洞察
  • 奶茶品牌ESG实践:从绿色供应链到可持续竞争力
  • 离线可用的网络急救方案
  • [RK3568][Android11] Android->默认显示设置->系统->开发者选项(不用连续点击版本号)