vue兩個輸入框聯(lián)動校驗方式(最大值-最小值)
vue兩個輸入框聯(lián)動校驗
如下圖,
1.滿足最大值和最小值的輸入要求【1-100的整數(shù)】
2.滿足最小值不能大于等于最大值
3.當最小值有報紅校驗,改正最大值使得最大值大于最小值,最小值的報紅校驗消失
html代碼
最大值:
<el-input v-model="restoreForm.maxrate" placeholder="請輸入" style="margin-left:5px;width:140px" @blur="checknum('max')"></el-input>
最小值:
<el-input v-model="restoreForm.restorerate" placeholder="請輸入" style="margin-left:5px;width:140px" @blur="checknum('min')"></el-input>
代碼不全,僅作參考
data中的validate校驗
//最小值 const checkrestorerate = (rule, value, callback) => { const { maxrate, restorerate } = this.restoreForm; // let reg = /^([1-9]|[1-9]\d|1\d{2}|100)$/; let reg = /^([1-9][0-9]{0,1}|100)$/; if (!reg.test(restorerate)) { return callback(new Error("請輸入1-100內(nèi)整數(shù)")); } else { if ( Number(maxrate) && Number(restorerate) && Number(restorerate) >= Number(maxrate) ) { return callback(new Error("最小值需小于最大值")); } else { return callback(); } } }; //最大值 const checkmaxrate = (rule, value, callback) => { const { maxrate, restorerate } = this.restoreForm; let reg = /^([1-9][0-9]{0,1}|100)$/; if (!reg.test(maxrate)) { return callback(new Error("請輸入1-100內(nèi)整數(shù)")); } else { if ( Number(maxrate) && Number(restorerate) && Number(restorerate) >= Number(maxrate) ) { return callback(new Error("最小值需小于最大值")); } else { return callback(); } } };
checknum(type) { if (type === "max") { if (this.restoreForm.maxrate > this.restoreForm.restorerate) { this.$refs.restoreForm.validateField("restorerate"); } } else { if (this.restoreForm.maxrate > this.restoreForm.restorerate) { this.$refs.restoreForm.validateField("maxrate"); } } },
這個方法首先判斷是哪個輸入框的blur事件,然后如果符合最大值大于最小值,那么之前最小值的報錯校驗再次校驗,為符合條件,即報紅提示消失
vue表單中范圍兩個輸入框共用一個驗證
最近碰到一個需求,就是一個有一項數(shù)據(jù)取一個范圍,并做驗證,但是UI的驗證提醒文字是合并在一起的,并不是每個輸入框有單獨的驗證提醒,本文以elementUI為例,按需求進行了一些改動。
<template> <div class="app-container"> <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm"> <el-form-item label="范圍" prop="area"> <el-col :span="11"> <el-form-item prop="start"> <el-input v-model="ruleForm.start" placeholder="請輸入起始值(0-1000)" /> </el-form-item> </el-col> <el-col class="line" :span="2" style="text-align:center">-</el-col> <el-col :span="11"> <el-form-item prop="end"> <el-input v-model="ruleForm.end" placeholder="請輸入結(jié)束值(0-1000)" /> </el-form-item> </el-col> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { const validateStart = (rule, value, callback) => { if (!!value) { // 1-1000的正則 const numReg = /^(?!00)(?:[0-9]{1,3}|1000)$/ if (!numReg.test(value)) { this.ruleForm.areaRules[0] = 1 // 手動觸發(fā)最外層form-item的正則驗證 this.areaBlur() return callback() } if (numReg.test(value)) { this.ruleForm.areaRules[0] = 2 this.areaBlur() return callback() } this.ruleForm.areaRules[0] = 0 this.areaBlur() callback() } else { this.ruleForm.areaRules[0] = -1 this.areaBlur() return callback() } } const validateEnd = (rule, value, callback) => { if (!!value) { // 1-1000的正則 const numReg = /^(?!00)(?:[0-9]{1,3}|1000)$/ if (!numReg.test(value)) { this.ruleForm.areaRules[1] = 1 this.areaBlur() return callback() } if (numReg.test(value)) { this.ruleForm.areaRules[1] = 2 this.areaBlur() return callback() } this.ruleForm.areaRules[1] = 0 this.areaBlur() callback() } else { this.ruleForm.areaRules[1] = -1 this.areaBlur() return callback() } } // areaRules內(nèi)值的含義:-1 提醒不能為空 0則表示正常 其他值為格式錯誤 const validateArea = (rule, value, callback) => { if (this.ruleForm.areaRules.includes(-1)) { return callback(new Error('范圍不能為空')) } if (this.ruleForm.areaRules[0] !== this.ruleForm.areaRules[1] || this.ruleForm.areaRules[0] === 1 || this.ruleForm.areaRules[1] === 1) { return callback(new Error('格式錯誤')) } if (this.ruleForm.start > this.ruleForm.end) { return callback(new Error('起始序號不能大于截止序號')) } callback() } return { ruleForm: { start: '', end: '', areaRules: [-1, -1] }, rules: { start: [{ type: 'string', required: true, validator: validateStart, trigger: 'blur' }], end: [{ type: 'string', required: true, validator: validateEnd, trigger: 'blur' }], area: [{ type: 'array', required: true, validator: validateArea, trigger: 'change' }] } } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!') } else { console.log('error submit!!') return false } }) }, // 手動觸發(fā)最外層form-item的正則驗證 areaBlur() { this.$refs['ruleForm'].validateField('area') } } } </script>
效果:
不僅是elementUI,其他前端框架也是可以這樣改的,只是需要一些細節(jié)
該方式還可以在填寫ip地址的時候應用
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項目總結(jié)之文件夾結(jié)構(gòu)配置詳解
這篇文章主要給大家總結(jié)介紹了關(guān)于vue項目之文件夾結(jié)構(gòu)配置的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。2017-12-12警告[vue-router]?Duplicate?named?routes?definition簡單解決方法
這篇文章主要關(guān)于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個錯誤提示是因為在Vue Router中定義了重復的路由名稱,需要的朋友可以參考下2023-12-12vue elementUI table 自定義表頭和行合并的實例代碼
這篇文章主要介紹了vue elementUI table 自定義表頭和行合并的實例代碼,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05vue用vis插件如何實現(xiàn)網(wǎng)絡(luò)拓撲圖
這篇文章主要介紹了vue用vis插件如何實現(xiàn)網(wǎng)絡(luò)拓撲圖,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10