输入数字验证 - 仅限输入数字或数字,int & float 两者
Posted
技术标签:
【中文标题】输入数字验证 - 仅限输入数字或数字,int & float 两者【英文标题】:Input number validation - Restrict to enter only numbers or digits, int & float both 【发布时间】:2015-07-29 00:46:56 【问题描述】:如何限制输入字段只输入数字/数字 int 和 float 两者。 有时我们需要为诸如金额之类的字段同时允许整数和浮点值,因此在这种情况下需要验证。没有可用的解决方案,但它们的代码很大。所以需要一个简短但有效的代码。
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
【问题讨论】:
混合 (html5/javascript) 解决方案的优势在于,一些移动设备提供了一个针对输入数字进行了优化的软键盘。 【参考方案1】:号码输入限制不需要长代码,试试这个代码。
它还接受有效的 int 和 float 两个值。
Javascript 方法
onload =function()
var ele = document.querySelectorAll('.number-only')[0];
ele.onkeypress = function(e)
if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
return false;
ele.onpaste = function(e)
e.preventDefault();
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
jQuery 方法
$(function()
$('.number-only').keypress(function(e)
if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
)
.on("cut copy paste",function(e)
e.preventDefault();
);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
更新
以上答案适用于最常见的用例 - 将输入验证为数字。
但是根据 cmets,有些人希望允许一些特殊情况,例如 负数并在之前向用户显示无效的击键 删除它,所以下面是这种特殊用例的代码 sn-p。
$(function()
$('.number-only').keyup(function(e)
if(this.value!='-')
while(isNaN(this.value))
this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
.split('').reverse().join('');
)
.on("cut copy paste",function(e)
e.preventDefault();
);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
【讨论】:
我没有意识到 isNaN 也检查小数。为优雅点赞。 :) 你知道这是否适用于屏幕键盘或代表用户键入的键盘助手? @SanuelJackson 谢谢。是的,这适用于屏幕键盘,您可以尝试操作系统的屏幕键盘,因为它的相同事件被捕获。通过键盘助手,您的意思是浏览器的自动填充功能,那么您需要一些额外的代码。.change(function(e) if(isNaN(this.value)) this.value=""; )
OP 可能不在乎,但这仅适用于非负数。它不会接受 -1。
@GuySchalnat 我当然会关心.. 为什么不.. 但是上面的代码适用于最常见的情况,对于一些特殊情况,例如允许负数,您还可以添加一个条件和其余的代码可以保持原样。
@GuySchalnat 更新了答案以解决对特殊情况的担忧 - 否定号码和 - 显示无效的击键。【参考方案2】:
单线解决方案 #1:
将<input type="number">
与step
属性一起使用。
<input type="number" step="0.0001"> // The user can enter up to 4 decimal places.
<input type="number" step="any"> // Not supported in all browsers, but permits numbers of any decimal precision.
您还可以使用min
和/或max
属性来设置最小值和/或最大值。
单线解决方案 #2:
使用带有 RegExp pattern
属性的常规文本 input
元素。
<input type="text" pattern="^-?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)$">
此 RegExp 接受以点 (.
) 和/或负号 (-
) 开头的数字。
【讨论】:
只是这个答案的一个脚注。此输入类型仅在 HTML5 中有效,current html5 tag support 这里有几件事很重要:1. 那是 HTML5 功能 2. 每个浏览器的外观和感觉都不同 3. 移动验证不可用 4. 对于提交时的验证,你必须有表单包含这个的标签。 5.所有浏览器的错误消息都不相同【参考方案3】:首先要做的事情。我更喜欢显示无效的击键而不是阻止它们。用户体验堆栈交换目前似乎同意 (see this question)。
也就是说,并不是每个人都同意,所以让我们看看我们能做些什么。
第二。这不会取代验证步骤。某些有效的击键组合不是有效数字,但需要被允许才能输入有效数字。例如,用户可以键入小数点(句号或逗号,具体取决于他们使用的语言),然后离开文本框,而您没有有效数字。以下字符串均为数字开头,但尚未生效:
. -. , -,前两个是 .5 或 -.5 的开头,而后两个在使用逗号而不是句号作为小数点的各种语言中是相同的。
这将我们带到(已经被拒绝)
<input type="number" step="any">
当然,您必须包含一个 JavaScript 脚本来修复非现代浏览器,但这些都是可用的。理论上,当用户使用使用逗号而不是句号作为小数点的语言工作时,这些也应该可以正常工作。更好的是,由于用户通常只使用一个浏览器,并且由于他们会习惯输入数字在该浏览器中的工作方式,并且由于他们会将大部分时间花在您的网站之外的其他网站上,因此如果您的网站不使用,他们可能会感到困惑以他们习惯的方式行事。
但也许您仍然想制定自己的解决方案。如果一切都失败了,我会使用正则表达式(是的,我知道,我现在有两个问题)。我不相信允许空格,所以我将其限制为负号、数字和一个小数点(无论他们使用哪个)。例如:
$('.rational-number').on('keypress', function(e)
if (e.charCode >= 32 && e.charCode < 127 &&
!/^-?\d*[.,]?\d*$/.test(this.value + '' + String.fromCharCode(e.charCode)))
return false;
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type-"text" class="rational-number">
这几乎有效。我现在唯一的问题是,它假定您键入的任何字符都位于字符串的末尾。这很好,除了负数的“-”,它只允许在开头。所以你可以输入 -5.4,但是如果你输入 5.4 然后按 home 键或左箭头键回到开头,它不会让你把它变成负数。
它也不会处理粘贴。粘贴是一个复杂的话题。我不同意拒绝所有的粘贴操作。我觉得这里最好的选择是让用户粘贴并让验证器选择任何无效数字。
【讨论】:
【参考方案4】:您可以将pattern
属性添加到输入字段。如果输入值与模式不匹配,您可以使用 css 选择器 :invalid
设置输入字段的样式和/或显示错误消息:
.error-msg
display: none; /* Hide by default */
.number-only:invalid
background: pink;
.number-only:invalid + .error-msg
display: inline;
<input type='tel' class='number-only' pattern='[+\-]?\d*\.?\d+' />
<span class='error-msg'>Please enter a valid integer or float value.</span>
一些注意事项:
type='tel'
让手机浏览器打开一个数字键盘,当然你也可以设置类型为text
。
浏览器支持pattern
输入属性:http://caniuse.com/#feat=input-pattern
浏览器支持:invalid
css 选择器:http://caniuse.com/#feat=form-validation
模式正则表达式不支持指数表示法,例如1.23e4
。
模式正则表达式不允许空格 - 它们在 int 和 float 表示法中无效,但允许它们可能会改善用户体验。
【讨论】:
如果应用程序仅适用于支持 HTML5 的现代浏览器,那么这将起作用,但此代码适用于现代浏览器,对无效键输入没有限制,尽管完全取决于所需的 UX,因此其他浏览器需要拥有本机验证脚本。为详细解释点赞【参考方案5】:在文本框的 onkeypress 中调用一个 jquery 函数。 在该函数中使用相应的 ascii 代码来限制输入。
【讨论】:
yes.. 然后我必须继续比较每个无效键的 ASCII 代码,代码变得更大,但需要的是几乎所有用例覆盖范围内的最少代码 函数 isNumberKey(evt) var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode 57)) return false; 其他 返回真; 在文本框 onkeypress 中调用此方法 查看第一条评论,它解释了它的局限性。 ***.com/questions/891696/…【参考方案6】:用户无法在 js 中输入十进制值。 尝试使用此代码:
if(document.getElementById(id).value.indexOf('.') != -1)
print "do not Enter decimal nuber";
【讨论】:
以上是关于输入数字验证 - 仅限输入数字或数字,int & float 两者的主要内容,如果未能解决你的问题,请参考以下文章