Introduction to the method of creating an interval selection component based on element

This article brings you an introduction to the method of creating an interval selection component based on element. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the company's system, product managers often require that a certain field be set to an interval threshold or used as a filtering condition during design. But because there is no very suitable component in element (the slider component does not support settings on both ends), I built one myself.

Achievements

The final display effect is as follows:

Requirements

Taking the project requirements as an example, the basic requirements are as follows:

1. is divided into left and right values, including left and right values, positive integers

2. The left side must be greater than or equal to 1, the right side must not be greater than 100000, the right side value must not be less than the left side

3. Default: 20 on the left side, 100000 on the right side, both are required

4. Out of focus verification

The page and form verification structures are the same:

<el-form>
    <el-form-item>
        <el-input></el-input>
    </el-form-item>
    ~
    <el-form-item>
        <el-input></el-input>
    </el-form-item>
</el-form>

Main idea

1. Single form verification: required item verification, positive integer verification, interval verification

2. Association verification: the right threshold must not be less than the left threshold

According to the above idea, the verification of a single form belongs to the public verification method, and the associated verification needs to be verified separately (because the comparison objects are different and the prompts are different), so in the custom verification The following definitions are included in the verification:

rules: {
    min: [
        { required: true, message: '必填项，请维护', trigger: 'blur' },
        { validator: this.validateCom, trigger: 'blur' },
        { validator: this.validateMin, trigger: 'blur' },
    ],
    max: [
        { required: true, message: '必填项，请维护', trigger: 'blur' },
        { validator: this.validateCom, trigger: 'blur' },
        { validator: this.validateMax, trigger: 'blur' },
    ],
},

Public verification methods: positive integer verification, interval verification

validateCom(rule, value, callback) {
    const one = Number(value);
    if (Number.isInteger(one)) {
        if (one  MAX_NUMBER) {
            return callback(new Error(`输入值必须小于${MAX_NUMBER}`));
        }
        return callback();
    }
    return callback(new Error('输入值必须为正整数'));
},

Note: The input output is always a string type , need to be converted into numbers for comparison

Association verification:

validateMin(rule, value, callback) {
    const one = Number(value);
    const max = Number(this.form.max);
    if (!max || one  min) {
        return callback();
    }
    return callback(new Error('输入值不得小于最小阈值'));
},

Probably, you will think, isn’t this the end! so easy! Now the real pitfalls begin

Filling the pits (key points)

According to the above writing, the basic functions of the component are realized, but there is a pitfall! As follows:

Obviously, the value on the left is smaller than the value on the right, but the verification prompt still reports an error. The reason is still a problem of association verification. Since it is an associated verification, when one of them is changed, both should be re-verified. It's very simple. When the input changes, won't it be OK to re-verify the form?

handleChange() {
    this.$refs.form.validate();
}

The actual performance is as we expected, but when we open the console, we will seeUncaught (in promise) false, what the hell is this? As an excellent front-end engineer, you will never allow errors to be reported in your code, even if it does not affect the normal process.

After verification: Promise reports an error, and Uncaught means that there is a reject state that has not been caught. The reason is that when a value is changed and the entire form is verified, the changed input will be verified twice, causing an exception.

Finally make the following modifications:

handleMinChange() {
    this.$refs.form.validateField('max');
},
handleMaxChange() {
    this.$refs.form.validateField('min');
},

// 并对外暴露操作方法
getFormData() {
    const ret = {};
    this.$refs.form.validate((valid) => {
        ret.valid = valid;
        ret.form = this.form;
    });
    return ret;
},
resetForm() {
    this.$refs.form.resetFields();
},

Summary

1. The input form output value is String type, even if type=number## is set

2. #The associated items need to be verified during association verification and cannot be verified repeatedly

Related recommendations:

Introduction to the usage of jQuery selector element

Introduction to the use of VUE-region selector (V-Distpicker) component

The above is the detailed content of Introduction to the method of creating an interval selection component based on element. For more information, please follow other related articles on the PHP Chinese website!