公司的系统中,产品经理在设计时经常要求对某个字段进行区间阈值设置或者作为筛选条件。但是苦于element中没有非常契合的组件(slider组件并不支持两端均能设定),于是自己动手造了一个。
成果
最终的展示效果如下:
需求
这里以项目的需求为例,基本的需求如下:
- 分为左右值,包含左右值,正整数
- 左侧必须大于等于1,右侧不得大于100000,右侧值必须不小于左侧
- 默认:左侧20,右侧100000,均必填
- 失焦校验
页面和表单校验结构一样:
<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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
- 国风大师纯音系列《古筝仙子 常静演奏 十指弹一》1CD[FLAC][919MB]
- DasKapital-OneMustHaveChaosInsidetoGiveBirthtoaDancingStar(2024)[24-44.1]WAV
- 王菲.1999-《只爱陌生人》日本东芝版[低速原抓WAV+CUE]
- 张小英1987-金奖金曲第一集[新加坡版][WAV+CUE]
- 鹿晗.2015-重启【海蝶】【FLAC分轨】
- 张芸京.2012-小女孩【金牌大风】【WAV+CUE】
- 余天.2002-雄狮魅力金曲2CD(南方金点系列)【南方】【WAV+CUE】
- 银霞.1982-《结·SAYYESMYBOY》台湾复刻版[WAV+CUE]
- 梁汉文1993-火热动感[引进版][WAV+CUE]
- 梁汉文2008-EDMONDHITS48[香港]3CD[WAV+CUE]
- 国风大师纯音系列《童丽-[渭城曲]》1CD[WAV分轨][593.5MB]
- 国风大师纯音系列《许菱子《烧筝2》古筝曲集》1CD[WAV分轨][1.3GB]
- 王子异《1996 Part.2》[320K/MP3][18.29MB]
- 群星.1994-宝丽金最倾情3CD【宝丽金】【WAV+CUE】
- 乐俊亨.2024-同泪【CharioticMusic】【FLAC分轨】