element UI 中 el-form 表单包含多个 el-input 时的校验方法_form中的v-model不能有两个el-input-优快云博客

本文链接：https://blog.youkuaiyun.com/SUPPER493910/article/details/84763363

本文分享了在Element-UI框架中，如何优雅地实现两个输入框的联动校验，特别是在频率设置场景下，确保用户输入的合理性和一致性。通过使用ref属性和自定义校验方法，实现了对两个输入框值的联合检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这一点element-ui真是有点死板，我是这样解决的，有两个情况，prop可以只绑定第一个input的，第二个input写上ref属性，验证的rules中写一个方法，这个方法验证第一个input框的同时，通过 this.$refs.xxx.value的形式获取第二个input框值，只要这两个input框中存在有问题的情况则直接返回error。当然这个方法不能算优雅，我也是分享下我的经验，有更好的方法希望大家分享下，网上没有好的答案，特此分享

<el-form-item label="同步数据频率：" prop="frequency">
      <el-input size="mini" v-model="addForm.frequency" class="form-input" style="width: 60px;"></el-input>
      次/
      <el-input size="mini" v-model="addForm.frequencyMinute" class="form-input" style="width: 60px;" ref="frequencyMinute"></el-input>
      分钟
      <span style="color: rgba(0,0,0,0.29);">均为空则不限制请求频率</span>
    </el-form-item>

以上是页面代码，校验部分

frequency:[
        { validator: checkFrequency, trigger: 'blur' }
      ]

校验方法

var checkFrequency = (rule, value, callback) => {
    let minutes = this.$refs.frequencyMinute.value;
    if (!value && !minutes) {
      callback();
    }
    var reg =  /^[1-9]\d*$/;
    if (!reg.test(value) || !reg.test(minutes)) {
      callback(new Error('请输入非零正整数'));
    } else {
      if (value > 1440 || minutes > 1440) {
        callback(new Error('数值不能大于1440'));
      } else {
        callback();
        }
      }
    };