我试图让我的登录表单仅验证是否只输入了数字。如果输入只是数字，我可以它工作，但是当我在数字后输入任何字符时，它仍然会验证等。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)")
}
}
与
/^\d+$/$编辑：
RobG 明智地建议更简洁的
/\D/.test(z)any非数字字符，则返回
true。
只需省略否定
!if(/\D/.test(z))这里是如何验证输入仅接受数字，这将接受像 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;"
/>
这样您将不允许用户输入除数字之外的任何内容
这个对我有用：
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)")
}
}
迟到的答案，但这可能会对某人有帮助
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
使用起来就像
nn=document.forms["myForm"]["num"].value;
ans=isNumber(nn);
if(ans)
{
//only numbers
}
这个 ans 是从这里找到的，投票率很高
function validateNumber(e) {
const pattern = /^[0-9]$/;
return pattern.test(e.key )
}
<input name="username" id="username" onkeypress="return validateNumber(event)">此方法不会锁定数字键盘数字、箭头、主页、结束按钮等
最简单的解决方案。
感谢我的伙伴给了我这个答案。
您可以在 input 文本框中设置 onkeypress 事件，如下所示：
onkeypress="validate(event)"然后使用这样的正则表达式：
function validate(evt){
evt.value = evt.value.replace(/[^0-9]/g,"");
}
它将扫描并删除与字段中的数字不同的任何字母或符号。
无需输入长代码来限制数字输入，只需尝试此代码即可。
它还接受有效的 int 和 float 两个值。
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 />$(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 />以上答案适用于最常见的用例 - 将输入验证为数字。
但允许少数特殊情况，例如 负数并向用户显示之前的无效击键 删除它，所以下面是此类特殊用例的代码片段。
$(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 />使用您已有的表格：
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);
}
释放按键后，这将删除所有非数字。
正则表达式很棒，但为什么不在尝试用它做某事之前先确保它是一个数字呢？
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!");
};
};
function ValidateNumberOnly()
{
if ((event.keyCode < 48 || event.keyCode > 57))
{
event.returnValue = false;
}
}
此功能将只允许在文本字段中输入数字。
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();
}
});
}
我认为我们不接受长结构编程，我们将添加每次拍摄代码，请参阅下面的答案。
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >避免使用“.”等符号“，”“+”“-”。我试过了，效果很好。
$('#example').keypress(function (evt) {
if (evt != null && evt.originalEvent != null && /\D/.test(evt.originalEvent.key)) {
evt.preventDefault();
evt.stopImmediatePropagation();
return false;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="example" id="example">如果你正在使用 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>//我使用这个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();
}
}
});
});
我正在验证反应中的数字。用户只能写入 0 到 9 作为输入值。
const validateNumber = (evt) => {
const pattern = /^[0-9]$/;
return !pattern.test(evt.key) && evt.preventDefault();
}
<input type="text" name="name" onKeyPress={(evt) => validateNumber(evt)} />