Javascript - 验证，仅限数字答案

【问题标题】：Javascript - validation, numbers onlyJavascript - 验证，仅限数字
【发布时间】：2012-05-29 15:15:28
【问题描述】：

我试图让我的登录表单仅验证是否只输入了数字。如果输入只是数字，我可以工作，但是当我在数字后输入任何字符时，它仍然会验证等。12akf 将工作。凌晨 1 点会工作。我怎样才能克服这个问题？

部分登录

<form name="myForm">
    <label for="firstname">Age: </label>
    <input name="num" type="text" id="username" size="1">
    <input type="submit" value="Login" onclick="return validateForm()">

function validateForm()
{

    var z = document.forms["myForm"]["num"].value;
    if(!z.match(/^\d+/))
        {
        alert("Please only enter numeric characters only for your Age! (Allowed input:0-9)")
        }
}

【问题讨论】：

你最好使用 test，它返回一个布尔值：if (/\D/.test(z)) {/* non-digit found */}。
最好将监听器放在表单上，因为它可以在不按提交按钮的情况下提交。

标签： javascript validation numbers

【解决方案1】：

function validateNumber(e) {
            const pattern = /^[0-9]$/;

            return pattern.test(e.key )
        }

 
 <input name="username" id="username" onkeypress="return validateNumber(event)">

这种方法不会锁定数字锁数字、箭头、主页、结束按钮等

【讨论】：

【解决方案2】：

如果你正在使用 React，只需这样做：

<input
  value={this.state.input}
  placeholder="Enter a number"
  onChange={e => this.setState({ input: e.target.value.replace(/[^0-9]/g, '') })}
/>

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component {
    state = {
      input: '',
    }
    
    onChange = e => {
      let input = e.target.value.replace(/[^0-9]/g, '');
      this.setState({ input });
    }
    
    render() {
        return (
          <div>
            <input
              value={this.state.input}
              placeholder="Enter a number"
              onChange={this.onChange}
            />
            <br />
            <h1>{this.state.input}</h1>
           </div>
        );
    }
}

ReactDOM.render(<Demo />, document.getElementById('root'));
</script>

【讨论】：

如果我也可以将它用于小数，那就太好了。不允许我添加“。”

【解决方案3】：

我认为我们不接受长结构编程，我们将添加每次拍摄代码，请参阅下面的答案。

&lt;input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" &gt;

【讨论】：

【解决方案4】：

var elem = document.getElementsByClassName("number-validation"); //use the CLASS in your input field.
for (i = 0; i < elem.length; i++) {
   elem[i].addEventListener('keypress', function(event){
      var keys = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0];
      var validIndex = keys.indexOf(event.charCode);
      if(validIndex == -1){
         event.preventDefault();
      }
  });
}

【讨论】：

【解决方案5】：

// 我使用这个 jquery 效果很好，只需将类 nosonly 添加到任何应该是数字的文本框：

$(document).ready(function () {
       $(".nosonly").keydown(function (event) {
           // Allow only backspace and delete
           if (event.keyCode == 46 || event.keyCode == 8) {
               // let it happen, don't do anything
           }
           else {
               // Ensure that it is a number and stop the keypress
               if (event.keyCode < 48 || event.keyCode > 57) {
              alert("Only Numbers Allowed"),event.preventDefault();
               }
           }
       });
   });

【讨论】：

【解决方案6】：

这个对我有用：

function validateForm(){

  var z = document.forms["myForm"]["num"].value;

  if(!/^[0-9]+$/.test(z)){
    alert("Please only enter numeric characters only for your Age! (Allowed input:0-9)")
  }

}

【讨论】：

【解决方案7】：

号码输入限制不需要长代码，试试这个代码。

它还接受有效的 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 />

以上答案适用于最常见的用例 - 将输入验证为数字。

但要允许一些特殊情况，例如负数并在之前向用户显示无效的击键删除它，所以下面是这种特殊用例的代码 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 />

【讨论】：

嘿@vinayakj 我已经在西班牙语中参考了 StackOverflow 的这个答案，顺便说一句，答案很好！ es.stackoverflow.com/a/34744/95
感谢@Elenasys..当然..感谢您将答案传播给西班牙观众。

【解决方案8】：

function ValidateNumberOnly()
{
if ((event.keyCode < 48 || event.keyCode > 57)) 
{
   event.returnValue = false;
}
}

此函数将只允许文本字段中的数字。

【讨论】：

但是不能用这个输入小数！

【解决方案9】：

最简单的解决方案。

感谢我的伙伴给了我这个答案。

您可以像这样在 input 文本框上设置 onkeypress 事件：

onkeypress="validate(event)"

然后像这样使用正则表达式：

function validate(evt){
     evt.value = evt.value.replace(/[^0-9]/g,"");
}

它将扫描并删除与字段中的数字不同的任何字母或符号。

【讨论】：

将文本粘贴到输入文本框后是否仍然有效？
.replace(/[^0-9]/g,"") 是我找到的最好和最简单的解决方案。我什至需要逗号和货币点，所以 .replace(/[^0-9,.]/g,"") 对我来说是完全匹配的。

【解决方案10】：

迟到的答案，但这可能会对某人有所帮助

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

使用会像

nn=document.forms["myForm"]["num"].value;

ans=isNumber(nn);

if(ans)
{
    //only numbers
}

这个答案是从这里以大量投票找到的

Validate numbers in JavaScript - IsNumeric()

【讨论】：

【解决方案11】：

正则表达式很棒，但为什么不在尝试使用它之前确保它是一个数字呢？

function addemup() {
var n1 = document.getElementById("num1");
var n2 = document.getElementById("num2");
sum = Number(n1.value) + Number(n2.value);
    if(Number(sum)) {
        alert(sum);
        } else {
            alert("Numbers only, please!");
        };
    };

【讨论】：

这需要比正则表达式更多的计算。

【解决方案12】：

匹配/^\d+$/。 $ 表示“行尾”，因此在初始运行数字之后的任何非数字字符都会导致匹配失败。

编辑：

RobG 明智地建议使用更简洁的/\D/.test(z)。此操作测试您想要的相反。如果输入包含任何个非数字字符，则返回true。

只需省略否定的! 并使用if(/\D/.test(z))。

【讨论】：

这不起作用。现在它只接受验证，即使它不是数字。我将其更改为： if(!z.match(/^\d+$/.$))
等等，你不是让z.match(/^\d+$/) 工作吗？这对我来说可以。您评论中代码中的最后一个.$ 什么都不做——句点和美元符号在正则表达式模式之外，并被解释为正则表达式修饰符（如g 表示全局或i 表示不区分大小写）。
@apsillers——考虑改为/\D/.test(z)，更短更简单。
你不需要！如果使用 /\d/.test(z)
@JillAndMr 测试是否存在 any 数字，但问题要求测试字符串是否为 only 数字。（例如，您的测试将匹配hello5，但这不是纯数字字符串。）

【解决方案13】：

使用您已有的表格：

var input = document.querySelector('form[name=myForm] #username');

input.onkeyup = function() {
    var patterns = /[^0-9]/g;
    var caretPos = this.selectionStart;

    this.value = input.value.replace(patterns, '');
    this.setSelectionRange(caretPos, caretPos);
}

这将在释放键后删除所有非数字。

【讨论】：

【解决方案14】：

这是验证输入以仅接受数字的方法，这将接受像 123123123.41212313 这样的数字

<input type="text" 
onkeypress="if ( isNaN(this.value + String.fromCharCode(event.keyCode) )) return false;"
/>

这将不接受输入点（。），所以它只接受整数

<input type="text" 
onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
/>

这样您将不允许用户输入除数字以外的任何内容

【讨论】：

在粘贴文本时这是无效的
您甚至可以在另一个这样的提交表单上进行验证