美文网首页
element-ui 表单验证同表单一个值不能小于另一个输入值

element-ui 表单验证同表单一个值不能小于另一个输入值

作者: 锋叔 | 来源:发表于2019-11-14 18:55 被阅读0次

    效果截图

    图片.png

    html代码

    
    <el-row>
      <el-col :span="6">
        <el-form-item label="收款金额" prop="amount" :rules="[
            { required: true, message: '请输入', trigger: 'blur' },
            { validator: this.numberRule, trigger: 'blur'}
          ]">
          <el-input type="number" v-model="voucherForm.amount" placeholder="收款金额"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="核销金额">
          <el-input v-model="voucherForm.writeoffAmount" disabled placeholder="核销金额"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    

    data部分

    
      data() {
        const numberRule = (rule, value, callback) => {
          if (Number(value) >= this.voucherForm.writeoffAmount) {
            if (Number.isInteger(Number(value)) && Number(value) > 0) {
              callback()
            } else {
              callback(new Error('请输入大于零的正整数'))
            }
          } else {
            callback(new Error('收款金额不能小于核销金额'))
          }
        }
        return {
          numberRule: numberRule,
          voucherForm: {
            voucher: 'R',
            custName: null,
            currCode: null,
            writeoffAmount: null
          },
        }
    

    相关文章

      网友评论

          本文标题:element-ui 表单验证同表单一个值不能小于另一个输入值

          本文链接:https://www.haomeiwen.com/subject/excdictx.html