elementUI中使用el-form-item时校验多个字段

最新推荐文章于 2024-07-24 15:51:28 发布

落魄切图仔

最新推荐文章于 2024-07-24 15:51:28 发布

阅读量2.1k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_44096635/article/details/128653820

版权

使用el-form-item时，是无法使用prop绑定一个字段,无法校验两个输入框，但业务中的需求是各式各样的，总会遇到这种情况，那就要想办法去实现它.。
在这里插入图片描述

 <el-form-item label="主推金额" v-if="!rebateTypeFlag" prop="primaryAmount" key="primaryAmount">
          <el-row class="number">
            <el-col :span="11">
              <el-input-number placeholder="请输入" v-model="ruleForm.primaryAmount[0]" :min="0" :precision="0"
                :controls="false" :max="9999999999" clearable></el-input-number>
            </el-col>
            <el-col :span="2" align="center">~</el-col>
            <el-col :span="11">
              <el-input-number placeholder="请输入" v-model="ruleForm.primaryAmount[1]" :min="0" :precision="0"
                :controls="false" :max="9999999999" clearable></el-input-number>
            </el-col>
          </el-row>
        </el-form-item>

校验代码

//金额校验规则
let newRule = (rule, value, callback) => {
  if (value[0] === undefined) {
    callback(new Error(rule.message || '请输入最小金额'))
  } else if (value[1] === undefined) {
    callback(new Error(rule.message || '请输入最大金额'))
  } else if (value[1] <= value[0]) {
    callback(new Error(rule.message || `最大值应该大于${value[0]}`))
  } else {
    callback()
  }
}