Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to use element to achieve an interval selection component in vue. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Main ideas

Single form check: required check, positive integer check, interval check

Correlation check: the threshold on the right must not be less than the threshold on the left

According to the above idea, the check of a single form belongs to the public verification method, and the association check needs to be checked separately (because the comparison object is different and the prompt is different), so the custom check is defined as follows:

Rules: {min: [{required: true, message: 'required, please maintain', trigger: 'blur'}, {validator: this.validateCom, trigger:' blur'}, {validator: this.validateMin, trigger: 'blur'},], max: [{required: true, message:' required Please maintain', trigger: 'blur'}, {validator: this.validateCom, trigger:' blur'}, {validator: this.validateMax, trigger: 'blur'},],}

Common check methods: positive integer check, interval check

ValidateCom (rule, value, callback) {const one = Number (value); if (Number.isInteger (one)) {if (one)

< MIN_NUMBER) { return callback(new Error(`输入值必须大于${MIN_NUMBER}`)); } else if (one >

MAX_NUMBER) {return callback (new Error (`input value must be less than ${MAX_NUMBER} `));} return callback ();} return callback (new Error ('input value must be a positive integer');}

Note: the output of input is always a string type, which needs to be converted to numbers for comparison.

Correlation check:

ValidateMin (rule, value, callback) {const one = Number (value); const max = Number (this.form.max); if (! max | | one

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

Min) {return callback ();} return callback (new Error ('input value must not be less than minimum threshold');}

Probably, you will think, this is the end of it! So easy! Now the real pit begins.

Fill in the hole (key point)

According to the above writing, the basic function of the component has been realized, but there is a pit! As follows:

Obviously, the value on the left is smaller than the value on the right, but the check prompt still reports an error. The reason is still the problem of correlation check. Since it is a correlation check, changing one of them should recheck two. It's simple. When input changes, isn't it just OK to revalidate the form?

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

The real performance is as we expected, but when we open console, we will see Uncaught (in promise) false, what the heck is this? as a good front-end engineer, you will not allow errors in your code, even if it does not affect the normal process.

After verification: Promise reported an error, Uncaught means that there is a reject status that has not been catch. The reason is that when you change a value, when you validate the entire form, the changed input performs two checks, resulting in an exception.

Finally, the following changes are made:

HandleMinChange () {this.$refs.form.validateField ('max');}, handleMaxChange () {this.$refs.form.validateField (' min');}, / / and expose the operation method getFormData () {const ret = {}; this.$refs.form.validate ((valid) = > {ret.valid = valid; ret.form = this.form;}); return ret;}, resetForm () {this.$refs.form.resetFields ();}

The output value of the summary input form is of type String. Even if the type=number association delivery is set, the associated items need to be verified and cannot be verified repeatedly.

All codes:

~ const MIN_NUMBER = 1 Const MAX_NUMBER = 100000 Export default {data () {return {form: {min:'20 million, max: '100000'}, rules: {min: [{required: true, message:' required Please maintain', trigger: 'blur'}, {validator: this.validateCom, trigger:' blur'}, {validator: this.validateMin, trigger: 'blur'},], max: [{required: true, message:' required Please maintain', trigger: 'blur'}, {validator: this.validateCom, trigger:' blur'}, {validator: this.validateMax, trigger: 'blur'},],},} }, methods: {getFormData () {const ret = {}; this.$refs.form.validate ((valid) = > {ret.valid = valid; ret.form = this.form;}); return ret;}, resetForm () {this.$refs.form.resetFields ();}, handleMinChange () {this.$refs.form.validateField ('max');}, handleMaxChange () {this.$refs.form.validateField (' min') }, validateCom (rule, value, callback) {const one = Number (value); if (Number.isInteger (one)) {if (one)

< MIN_NUMBER) { return callback(new Error('输入值必须大于0')); } else if (one >

MAX_NUMBER) {return callback (new Error ('input value must be less than 100000');} return callback ();} return callback (new Error (' input value must be positive integer');}, validateMin (rule, value, callback) {const one = Number (value); const max = Number (this.form.max); if (! max | | one

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

Min) {return callback ();} return callback (new Error ('input value must not be less than the minimum threshold');},},}; these are all the contents of the article "how to use element to implement an interval selection component in vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.