公司的系統中，產品經理在設計時經常要求對某個字段進行區間閾值設置或者作為篩選條件。但是苦于element中沒有非常契合的組件（slider組件并不支持兩端均能設定），于是自己動手造了一個。
成果
最終的展示效果如下：
需求
這里以項目的需求為例，基本的需求如下：
頁面和表單校驗結構一樣：
<el-form ref="form" :model="form" :rules="rules"> <el-form-item prop="min"> <el-input v-model="form.min" /> </el-form-item> ~ <el-form-item prop="max"> <el-input v-model="form.max" /> </el-form-item></el-form>
主要思路
根據上面的思路，單個表單的校驗屬于公共校驗方法，關聯校驗需要分別校驗（因為對比對象不同，且提示語不同），由此在自定義校驗中有了如下定義：
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' }, ],},公共校驗方法：正整數校驗、區間校驗
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(`輸入值必須小于${MAX_NUMBER}`)); } return callback(); } return callback(new Error('輸入值必須為正整數'));},注意：input輸出的始終是字符串類型，需要轉換成數字后進行比對
關聯校驗：
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('輸入值不得小于最小閾值'));},大概，你會想，這不就完了嗎！so easy！現在真正的坑才開始
填坑（重點）
根據上面的寫法，組件的基本功能實現了，但是有一個坑！如下：
很顯然，左側值是小于右側值的，但是校驗提示仍然報錯。究其原因，還是關聯校驗的問題。既然是關聯交驗，改變其中一個時應該會重新校驗兩個。很簡單，在input改變時，重新校驗表單不就OK了嗎
handleChange() { this.$refs.form.validate();}真實表現正如我們所料，但是當我們打開console的時候，會看到Uncaught (in promise) false，這又是什么鬼，身為優秀的前端工程師，你定不會允許自己的代碼里報錯，即使不影響正常流程。
經查證：Promise報錯，Uncaught的意思是代表有reject狀態沒有被catch。究其原因，改變一個值時，校驗整個表單時，改變的那個input會執行兩次校驗，導致異常。
最后做如下修改：
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();},總結input表單輸出值為String類型，即使設置了type=number關聯交驗時需要驗證其關聯項，且不能重復校驗
全部代碼：
<template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item prop="min"> <el-input v-model="form.min" @change="handleMinChange" /> </el-form-item> ~ <el-form-item prop="max"> <el-input v-model="form.max" @change="handleMaxChange" /> </el-form-item> </el-form></template> <script>const MIN_NUMBER = 1;const MAX_NUMBER = 100000; export default { data() { return { form: { min: '20', max: '100000' }, 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' }, ], }, }; }, 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('輸入值必須小于100000')); } return callback(); } return callback(new Error('輸入值必須為正整數')); }, 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('輸入值不得小于最小閾值')); }, },};</script> 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
