富贵资源网 Design By www.hznty.com
公司的系统中，产品经理在设计时经常要求对某个字段进行区间阈值设置或者作为筛选条件。但是苦于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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。