封装的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}}