Javascript 使用RegExp进行数字验证以防止用户输入无效

我有一个JavaScript函数，用于验证输入字段，并防止用户键入任何与条件不匹配的内容。此函数基于

事件.keyCode

我试图修改该函数以使用RegExp，并验证“每个字符”而不是“每个完整输入”，以便它执行相同的操作，但条件不同：

仅数字

允许的小数点“.”或“，”

以下是当前形式的函数，使用

event.keyCode

：

function isNumeric(evt, alertDIVid, alertMsg) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode >= 48 && charCode <= 57) {
        document.getElementById(alertDIVid).innerHTML = '';
        return true;
    }
    else {
        document.getElementById(alertDIVid).innerHTML = alertMsg;
        return false;
    }
}

document.getElementById('AMNT').onkeypress = function(event) {
    event = event || window.event;
    return isNumeric(event, 'numericalert', 'Numeric values only!')
};

函数为数值型（evt、alertDIVid、alertMsg）{
var charCode=（evt.which）？evt.which:event.keyCode
如果（charCode>=48&&charCode要进行所需的验证，则需要监听
keyup
事件。此事件在字段更改后激发，以便知道字段的新值。您还需要知道字段的以前值，以便可以“重置”如果用户键入的内容被证明无效，则此选项无效

例如：

(function() {
    var previousValue = document.getElementById('myInput').value;
    var pattern = /^\d*((\.|,)\d*)?$/;

    function validateInput(event) {
        event = event || window.event;
        var newValue = event.target.value || '';

        if (newValue.match(pattern)) {
            // Valid input; update previousValue:
            previousValue = newValue;
        } else {
            // Invalid input; reset field value:
            event.target.value = previousValue;
        }
    }

    document.getElementById('myInput').onkeyup = validateInput;
}());

工作演示：

值得注意的是，这还将验证空字符串，以及未完成的数字，如
5、
或
42.
（否则用户必须在键入小数后插入小数点，这将是非常奇怪的）

最后，请记住，这可能不是一个跨浏览器安全的解决方案。如果您需要纯JavaScript解决方案，则需要对其进行优化（即，这可能在IE中不起作用）


编辑：当然，显示错误消息而不是将输入字段重置为以前的值也是完全可能的（）：

我让您自己用更友好的方式来替换
警报。
最简单的解决方案是这样的

// Returns true on valid, false on invalid
function myInputFilter(input)
{
    var value = input.value;
    var regex = /^[\d\,\.]*$/;

    if(!regex.test(value))
        return false;

    return true;
}

您可以编辑该函数，使其只接受一个字符串参数，但我选择让它接受文本输入元素。正则表达式可以被任何东西替换，我为本例制作了一个简单的正则表达式。如果我是您，我会对其进行一点改进（）

下面是一个实现的过滤器示例

您可以使用以下正则表达式：

/^[+-]?(?=.)(?:\d+,)*\d*(?:\.\d+)?$/

只允许任何数量的逗号和一个点，条件是数字不能以逗号开头。数字可以在开头有可选的
+
或
-
。
除了添加了
，
作为十进制分隔符之外，这几乎是完全相同的。或者我遗漏了什么吗？这很相似，但我没有知道如何在条件不匹配的情况下拒绝键入…为什么要使用正则表达式呢？创建一个允许的字符数组并测试每个新字符似乎是非常简单和合乎逻辑的。使用正则表达式执行此任务就像用破坏者打苍蝇一样ball@Codemonkey：使用RegEx，我可以控制和拒绝输入，如“38.9.2”，但不允许使用字符…正确方向的提示：在填充字段之前触发
keypress
事件。如果要验证输入字段的值，必须使用
keyup
事件。
keyup
事件的一个缺点（或优点？）是只触发一次（当按键释放时），同时也会为每个按键触发
keypress
事件。您可能希望将
^
替换为
^（？=\.？\d |$）
，以确保输入字段包含数字。您的测试将不允许任何内容（似乎正常），或只允许一个点（不正常）。我的建议将允许：
.5
、
5.
、
5
等和空字符串。如果字符串不应为空，请删除
|$
。此外，最好不要修改输入的字段。OP通过通知用户而不是更新值，做得很好：使用当前代码，用户将无法轻松地更正任何无效的输入，因为您的代码会还原输入的值。@Rob:这是一个棘手的问题，因为用户在键入时仍然需要输入一个
（例如）
.5
。我认为提交时需要额外的验证…您更新的代码仍然存在问题：
警报
对话框将阻止用户更新输入字段。这是一个很大的麻烦，如图所示：.+1用于工作和处理提示。最后提示，您的次要RegExp可以优化为：
/^（？=）\d*（？：[，]\d+？$/
请不要（仅仅）参考外部网站。确保您的答案可以单独阅读。此外，OP没有指定在任何地方使用jQuery。
/^[+-]?(?=.)(?:\d+,)*\d*(?:\.\d+)?$/