Javascript 如何检查用户是否输入了非数字
所以我有这个函数:Javascript 如何检查用户是否输入了非数字,javascript,html,Javascript,Html,所以我有这个函数: function inputCheck() { var check = document.forms["drinkList"]["quant1"].value if (isNaN(check)) { window.alert("Input numbers only"); return false; }
function inputCheck()
{
var check = document.forms["drinkList"]["quant1"].value
if (isNaN(check))
{
window.alert("Input numbers only");
return false;
}
}
我使用此代码检查用户是否在文本框中输入了字符。如果他们这样做了,那么它将显示一个警报,说明它只接受数字。问题是,我还有11个文本框,我必须在其中运行这个函数 不管怎样,我可以让它工作,而不需要再创建11个函数吗 其他文本框名称为:
- quant2
- quant3
- 数量4
- quant5
- 鞭子
- 奶油
- 糖
- 巧克力
- 焦糖2
onchange
进行实时检查。如果有效,请尝试
var textboxes = ['quant2', 'quant3', 'quant4', 'quant5', 'whip', 'cream', 'sugar', 'chocolate', 'caramel2'];
for (var i = 0; i < textboxes.length; i++ ){
var check = document.forms["drinkList"][textboxes[i]].value;
if (isNaN(check)){
window.alert("Input numbers only");
break;
}
}
var textboxs=['quant2','quant3','quant4','quant5','whip','cream','sugar','chocolate','caramel2'];
对于(变量i=0;i
对不起,刚才读得不清楚。我想这应该可以
<input onchange="inputCheck(this)">
function inputCheck(elem){
var check = elem.value;
if (isNaN(check))
{
window.alert("Input numbers only");
return false;
}
}
功能输入检查(elem){
var检查=元素值;
如果(isNaN(检查))
{
窗口警报(“仅输入数字”);
返回false;
}
}
我建议检查内置功能
但是,如果您真的想亲自检查,您可以执行以下操作:
函数isNumber(n){
return!isNaN(parseFloat(n))和&isFinite(n);
}
函数数(){
var值=此值;
如果(!isNumber(值)){
console.dir('不是数字!');//将其替换为您的警报
this.classList.add('error');
}否则{
this.classList.remove('error');
}
}
var inputs=document.querySelectorAll('.number only');//选择具有类的所有输入。仅限编号
[]forEach.call(输入,函数(输入){
addEventListener('keyup',numberOnly);//使用numberOnly onkeyup验证输入
});代码>
输入{
显示:块;
保证金:5px;
边框:1px实心#aaa;
填充物:5px10px;
}
输入错误{
轮廓颜色:#f00;
边框:1px实心#f00;
位置:相对位置;
}
将事件连接到多个输入的更有效方法是将事件连接到父级(例如,
),并检查冒泡事件的目标:
旁白:
使用
。这是一个由浏览器提供的功能,它在输入时可以立即工作,还有其他一些优点(比如在移动设备上提供一个数字键盘,而不是全键盘)。以下是和供进一步阅读。为什么不使用jquery,如果添加相同的类,它可以选择所有文本框,例如:nonNumberTextbox
$("#drinkList .nonNumberTextbox").each(function(index, node) {
if (isNaN(node.value)) {
window.alert("Input numbers only");
return false;
}
});
在您的代码中,isNaN(检查)
将始终返回false
。这是因为输入
元素的.value
属性总是返回一个字符串,而字符串的isNaN
是false
在将其传递给isNaN
之前,需要强制将check
设置为一个数字。我会建议使用。您还需要确保check
不是空字符串或全空白字符串,因为一元加号将强制它们为0
if (check.trim() === '' || isNaN(+check)) {
或者,根据您的需要,您可以使用parseInt
或parseFloat
,在解析空字符串或全空白字符串时返回NaN
if (isNaN(parseInt(check, 10))) { // if only integers are allowed
}
if (isNaN(parseFloat(check))) { // if integers and decimals are allowed
}
另一种替代方法是使用验证字符串,而无需强制
if(!/^\d+$/.test(check)) { // if the number needs to be an integer
}
if(!/^\d+(?:\.\d*)?$/.test(check)) { // if the number can be an integer or a decimal
}
确定什么是变量(输入字段名),并使函数接受什么是变量作为参数。我建议您了解更多有关函数的基础知识:。但仅供参考,仅允许用户输入一个数字。是的,用户可以编辑html并仍然输入数字以外的内容,但他们可以以任何方式编辑javascirpt并仍然通过验证。如果这仅仅是为了用户体验,那么这将起作用。我这样做是为了课堂作业。这就是我的教授想要的条件之一。“包括当用户在其中一个饮料或饮料复选框中输入数量时将运行的函数。此函数将检查输入的值是否为数字。如果该值不是数字,则应在警告消息中显示错误消息。”我们不是来解决您的课堂作业的。按分配给你的去做我的意思是,正如你所看到的。是我做的。。。。但它不起作用,所以我来到这里,寻求帮助…逻辑。我很乐意,但这会使警报毫无用处。我们的教授想要一个弹出窗口,上面写着数字是只允许的。@RockGuitarist1哦,我明白了!然后检查新的答案,看看它是否对你有帮助!在回答这个问题时禁止使用正则表达式,你会受到惩罚,不要问我为什么
if(!/^\d+$/.test(check)) { // if the number needs to be an integer
}
if(!/^\d+(?:\.\d*)?$/.test(check)) { // if the number can be an integer or a decimal
}