前端基础学习-表单项的多层校验

最新推荐文章于 2024-03-22 09:32:45 发布

小夭。

最新推荐文章于 2024-03-22 09:32:45 发布

阅读量349

点赞数

分类专栏：前端文章标签： html vue js

本文链接：https://blog.csdn.net/m0_47146037/article/details/115679091

版权

前端专栏收录该内容

55 篇文章 0 订阅

订阅专栏

在项目开发中遇到需要对两个表单项进行一起校验，这个时候可以把两个表单项同时放在一个表单项下面

效果如下
在这里插入图片描述

这里的校验规则是最低金额与最高金额不可同时为空，且最低金额必须小于最高金额

代码部分

html

         <!-- 金额范围校验 -->
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" style="width: 85%;">
          <el-form-item label="金额范围" prop="price">
            <el-col :span="11">
              <el-form-item prop="minPrice">
                <el-input v-model="ruleForm.minPrice" size="mini" placeholder="最低金额" maxlength="20" @change="checkMinPrice"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <span>—</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="maxPrice">
                <el-input v-model="ruleForm.maxPrice" size="mini" placeholder="最高金额" maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <span>元</span>
            </el-col>
          </el-form-item>
         </el-form>

在el-form-item下添加el-form-item

data部分

data () {
    let that = this
    var checkPrice = (rule, value, callback) => {
      if (!that.ruleForm.minPrice && !that.ruleForm.maxPrice) {
        return callback(new Error('最低金额与最高金额不能同时为空'))
      }
      if (that.ruleForm.minPrice && that.ruleForm.maxPrice && parseFloat(that.ruleForm.minPrice) >= parseFloat(that.ruleForm.maxPrice)) {
        return callback(new Error('最低金额必须要比最高金额低哦'))
      }
      callback()
    }
    return {
      rules: {
        price: [
          {
            validator: checkPrice, required: true, trigger: 'blur'
          }
        ]
      }
    }