双11狂欢大促

盲盒赢 定制羽绒服

开启惊喜盲盒，抽取你的专属好礼

— 惊喜奖品抢先看 —

超级年卡50元券

周边70元券

手机支架

一拖三数据线

雨伞

运动毛巾

电动牙刷

VIP月卡

机械键盘

定制羽绒服

超级年卡50元券

周边70元券

手机支架

一拖三数据线

雨伞

运动毛巾

电动牙刷

VIP月卡

机械键盘

定制羽绒服

如何限制input输入框联动数值的最大数值？

2017-10-25 11:54:36 1.4k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

qq_31673157 墨衍会员 · AI 创作全网分发关注 + 加入社区

Vue+Element UI实战：el-input如何优雅限制0-100整数输入（附联动校验）本文详细介绍了在Vue+Element UI项目中，如何优雅地使用el-input组件限制0-100整数输入，并实现最小值与最大值的联动校验。通过formatter和parser属性，结合正则表达式和边界检查，有效处理用户输入、粘贴及开发者工具修改等场景，提升表单交互体验与数据准确性。阅读详情

有4个输入框分别为：A1,Y1,Y2,Y3
根据A1输入的数值分别限制Y1,Y2,Y3的最大输入数值（不是字符长度）。
公式为：
Y1的最大输入数值 = A1乘以500减去Y2减去Y3
Y2的最大输入数值 = A1乘以500减去Y1减去Y3
Y3的最大输入数值 = A1乘以500减去Y1减去Y2

例如：
A1=2
y2=3
y3=4
Y1输入框里最大只能输入的数值 : 2*500-3-4=993

...全文

Element UI实战：el-input如何优雅地限制0-100整数输入（附联动校验）本文详细解析了如何利用Element UI的el-input组件，通过formatter与parser属性，实现0-100整数输入的优雅限制。文章不仅提供了基础的单输入框限制方案，还深入探讨了最小值与最大值的联动校验逻辑，并最终封装成一个可复用的通用范围输入组件，旨在提升后台管理系统表单验证的用户体验与开发效率。阅读详情

qq_31673157

CSS 61,116 成员 60,701 内容

+ 关注 + 加入社区

切换为时间正序

qq_31673157 2017-10-25

打赏
举报

引用 4 楼 jslang 的回复:

改一下，这样比较好


<form method="post" id="form1" >
	A1 <input type="text" name="a1" value="" /><br>
	Y1 <input type="text" name="y1" oninput="fg(this)" value="" /><br>
	Y2 <input type="text" name="y2" oninput="fg(this)" value="" /><br>
	Y3 <input type="text" name="y3" oninput="fg(this)" value="" /><br>
</form>
<script type="text/javascript">
function fg(t) {
	var f = document.getElementById("form1");
	var a1 = f.a1.value*1||0;
	var y1 = f.y1.value*1||0;
	var y2 = f.y2.value*1||0;
	var y3 = f.y3.value*1||0;
	var tv = t.value*1||0;
	if (y1+y2+y3>a1*500) {
		alert("输入的数大于最大值");
		t.value=a1*500-y1-y2-y3+tv;
	}
}
</script>

完美解决我的问题。

qq_31673157 2017-10-25

打赏
举报

引用 3 楼 jslang 的回复:


<form method="post" id="form1" >
	A1 <input type="text" name="a1" value="" /><br>
	Y1 <input type="text" name="y1" oninput="fg(this)" value="" /><br>
	Y2 <input type="text" name="y2" oninput="fg(this)" value="" /><br>
	Y3 <input type="text" name="y3" oninput="fg(this)" value="" /><br>
</form>
<script type="text/javascript">
function fg(t) {
	var f = document.getElementById("form1");
	var a1 = f.a1.value*1||0;
	var y1 = t==f.y1?0:f.y1.value*1||0;
	var y2 = t==f.y2?0:f.y2.value*1||0;
	var y3 = t==f.y3?0:f.y3.value*1||0;
	if (t.value>a1*500-y1-y2-y3) {
		alert("输入的数大于最大值");
		t.value=a1*500-y1-y2-y3;
	}
}

非常感谢。

天际的海浪 2017-10-25

打赏
举报

改一下，这样比较好


<form method="post" id="form1" >
	A1 <input type="text" name="a1" value="" /><br>
	Y1 <input type="text" name="y1" oninput="fg(this)" value="" /><br>
	Y2 <input type="text" name="y2" oninput="fg(this)" value="" /><br>
	Y3 <input type="text" name="y3" oninput="fg(this)" value="" /><br>
</form>
<script type="text/javascript">
function fg(t) {
	var f = document.getElementById("form1");
	var a1 = f.a1.value*1||0;
	var y1 = f.y1.value*1||0;
	var y2 = f.y2.value*1||0;
	var y3 = f.y3.value*1||0;
	var tv = t.value*1||0;
	if (y1+y2+y3>a1*500) {
		alert("输入的数大于最大值");
		t.value=a1*500-y1-y2-y3+tv;
	}
}
</script>

天际的海浪 2017-10-25

打赏
举报


<form method="post" id="form1" >
	A1 <input type="text" name="a1" value="" /><br>
	Y1 <input type="text" name="y1" oninput="fg(this)" value="" /><br>
	Y2 <input type="text" name="y2" oninput="fg(this)" value="" /><br>
	Y3 <input type="text" name="y3" oninput="fg(this)" value="" /><br>
</form>
<script type="text/javascript">
function fg(t) {
	var f = document.getElementById("form1");
	var a1 = f.a1.value*1||0;
	var y1 = t==f.y1?0:f.y1.value*1||0;
	var y2 = t==f.y2?0:f.y2.value*1||0;
	var y3 = t==f.y3?0:f.y3.value*1||0;
	if (t.value>a1*500-y1-y2-y3) {
		alert("输入的数大于最大值");
		t.value=a1*500-y1-y2-y3;
	}
}

jio可 2017-10-25

打赏
举报

Y1,Y2,Y3随便一个值变化都会影响最大值的范围，只能是在所有值都输入以后再做判断提示那些值不符合了

浪子回头8 2017-10-25

打赏
举报

提交后比较一下，给出相应提示

✦双11狂欢大促✦

如何限制input输入框联动数值的最大数值？

相关推荐

双11狂欢大促