vue.js < input type="number">不阻止输入无效数字,但“element.value”不允许我更正它们

von4xj4u  于 2022-11-17  发布在  Vue.js
关注(0)|答案(3)|浏览(198)

MDN documentation<input type="number">
它们包括拒绝非数字输入的内置验证。
它的意思是“当尝试提交HTML表单时拒绝”吗?我输入了“4 e4--23”。HTML没有拒绝它。

因此,<input type="number">不能防止输入**非数值。如果我可以通过编程纠正用户的输入,我不在乎它。例如,用户输入的减号不在第一个位置-使用JavaScript,* 理论上 * 我可以删除它。
然而,下面是不明显的JavaScript行为:当input元素有“number”属性,并且value是无效数字时,Element.value返回一个空字符串。这是一个非常棘手的编程验证:因为我们有空字符串值,验证器将返回“输入不能为空。请输入值。”输入不为空时出错!
第一个
我如何才能得到实际输入的值?(如果你知道Vue,请添加Vue的解决方案。)

anauzrmj

anauzrmj1#

试试这个:

I only accept numbers:
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
<br>
I only accept numbers inlcuding a point:
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
<br>
EDIT: I accept negative numbers inlcuding a point:
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1');">
<br>
EDIT: I accept negative numbers inlcuding a point:
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1').replace(/(\..*)\./g, '$1');">
<br>
EDIT2: I accept negative numbers inlcuding a point (only one "minus" sign):
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1').replace(/(\..*)\./g, '$1').replace(/(\-.*)\-/g, '$1');">
<br>
EDIT3: I also accept "e" and "E"
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9\.\-\e\E]/g, '').replace(/(\..*)\./g, '$1').replace(/(\..*)\./g, '$1').replace(/(\-.*)\-/g, '$1').replace(/(\e.*)\e/g, '$1').replace(/(\E.*)\E/g, '$1');">
<br>

不同的浏览器对“输入类型编号”的处理方式不同

s6fujrry

s6fujrry2#

请尝试<input type="number" inputmode="numeric"><input type="tel" inputmode="numeric">

eh57zj3b

eh57zj3b3#

Vue.js中有解决方法。您可以使用**$event.target**,其中包含更多详细信息。它包含对象**'validity',其属性'badInput'会告诉我们值是否正确。
请参见下面示例,对于错误值'如
' e23 ','--1**',我们将获得可在验证规则中使用**' NaN '**
第一个

相关问题