vue element validator

通过validator验证2个字段的值

 		<el-col :span="6">
          <el-form-item label="宽带" prop="minBandwidth" label-width="70px">
             <el-input-number v-model="form.minBandwidth" placeholder="请输入最小带宽值" :precision="2" :step="0.1" :min="0" :style="{width: '100%'}"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="maxBandwidth" label-width="40px">
             <el-input-number v-model="form.maxBandwidth" placeholder="请输入最大带宽值" :precision="2" :step="0.1" :min="0" :style="{width: '100%'}"/>
          </el-form-item>
        </el-col>
 	rules: {
        userId: [
            { required: true, message: '请输入用户', trigger: 'blur' },
        ],
        equipmenNum: [
            { required: true, message: '请输入设备数量', trigger: 'blur' },
        ],
        minBandwidth: [
            { required: true, message: '请输入最小带宽值', trigger: 'blur' },
            { validator: this.checkMinBandwidth, trigger: 'blur' }
        ],
        maxBandwidth: [
            { required: true, message: '请输入最大带宽值', trigger: 'blur' },
            { validator: this.checkMaxBandwidth, trigger: 'blur' }
        ],
        calcTime: [
            { required: true, message: '请输入生成时间段', trigger: 'blur' },
        ],
      },
// 验证最小带宽
    checkMinBandwidth(rule, value, callback){
      if(!(this.form.maxBandwidth === undefined || value <= this.form.maxBandwidth)){
        callback(new Error("带宽最小值不能大于最大值"))
      }
    },
    // 验证最大带宽
    checkMaxBandwidth(rule, value, callback){
      if(!(this.form.minBandwidth === undefined || value >= this.form.minBandwidth)){
        callback(new Error("带宽最大值不能小于最小值"))
      }
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值