美文网首页
多个输入框校验,最大值和最小值联动校验

多个输入框校验,最大值和最小值联动校验

作者: 我是七月 | 来源:发表于2024-08-05 12:24 被阅读0次
     <el-form-item label="ES搜索分数" prop="userId">
                    <div class="score">
                        <el-form-item prop='scoreMin' style="width: 108px">
                            <el-input v-model="queryParams.scoreMin" placeholder="最小分数" maxlength="10"
                                @input="checkNumber('scoreMin')"
                                Onkeyup="this.value=this.value.replace(/[^\d^\.]+/g,'').replace(/^0+(\d)/,'$1').replace(/^\./,'0.').match(/\d+.?\d{0,2}/);this.dispatchEvent(new Event('input'))" />
                        </el-form-item>
                    </div>
                    <span style="margin-left: 5px;margin-right: 5px">至</span>
                    <div>
                        <el-form-item prop='scoreMax' style="width: 108px">
                            <el-input v-model="queryParams.scoreMax" placeholder="最大分数" maxlength="10"
                                @input="checkNumber('scoreMax')"
                                Onkeyup="this.value=this.value.replace(/[^\d^\.]+/g,'').replace(/^0+(\d)/,'$1').replace(/^\./,'0.').match(/\d+.?\d{0,2}/);this.dispatchEvent(new Event('input'))" />
                        </el-form-item>
                    </div>
                </el-form-item>
   const checkMin = (rule, value, callback) => {
            if (this.queryParams.scoreMax && !value) {
                callback(new Error('请输入最小值'));
            }
            if (this.queryParams.scoreMax && Number(this.queryParams.scoreMax) < Number(value)) {
                callback(new Error('不能大于最大值'));
            }
            callback()
        };
        const checkMax = (rule, value, callback) => {
            if (this.queryParams.scoreMin && !value) {
                callback(new Error('请输入最大值'));
            }
            if (this.queryParams.scoreMin && Number(this.queryParams.scoreMin) > Number(value)) {
                callback(new Error('不能小于最小值'));
            }
            callback()
        }
     return {
         rules: {
                scoreMin: [
                    {
                        trigger: "blur",
                        validator: checkMin
                    },
                ],
                scoreMax: [
                    {
                        trigger: "blur",
                        validator: checkMax
                    },
                ],
            },
      }
   methods: {
        checkNumber(type) {
            if (type === 'scoreMin') {
                this.$refs.queryRef.validateField('scoreMax');
            } else {
                this.$refs.queryRef.validateField('scoreMin');
            }
        },
}

<style lang="scss" scoped>
.score {
    padding: 0;
    margin: 0;

    :deep(.el-form-item) {
        margin-right: 0 !important;
    }
}
</style>

相关文章

网友评论

      本文标题:多个输入框校验,最大值和最小值联动校验

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