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

【问题标题】：Numeric validation with RegExp to prevent invalid user input使用 RegExp 进行数字验证以防止无效的用户输入
【发布时间】：2012-01-12 04:55:24
【问题描述】：

我有一个 JavaScript 函数，它可以验证输入字段并防止用户输入任何不符合条件的内容。该函数基于event.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!')
};

【问题讨论】：

这是your previous question 的几乎完全相同的副本，除了添加的, 作为小数分隔符。还是我错过了什么？
类似，但是如果条件不匹配我不知道如何拒绝输入...
你为什么要使用 RegEx 呢？创建一个允许的字符数组并针对它测试每个新字符似乎非常简单和合乎逻辑。使用 RegEx 来完成这项任务就是用破坏球拍苍蝇
@Codemonkey：使用 RegEx，我可以控制和拒绝像“38.9.2”这样的输入，但不能使用允许的字符...
提示正确方向：keypress 事件在字段填充之前触发。如果要验证输入字段的值，则必须使用 keyup 事件。 keyup 事件的一个缺点（或优势？）是它只被触发一次（当按键被释放时），而keypress 事件也会在每次按键时触发。

标签： javascript regex

【解决方案1】：

为了进行所需的验证，您需要改为监听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;
}());

工作演示：http://jsfiddle.net/8kUdG/

值得注意的是，这还将验证 空字符串，以及 未完成 数字，例如 5, 或 42.（否则用户必须插入输入小数点后的小数点符号，这会……很奇怪）。

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

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

(function() {
    var pattern = /^(?=.)\d*(?:[.,]\d+)?$/;
    var error = document.getElementById('error');

    document.getElementById('myInput').onkeyup = function(event) {
        event = event || window.event;
        var newValue = event.target.value || '';

        if (newValue.match(pattern)) {
            error.innerHTML = '';
        } else {
            error.innerHTML = 'Not a valid number!';
        }
    };
}());

~~我留给你用更用户友好的东西替换alert。~~

【讨论】：

您可能希望将 ^ 替换为 ^(?=\.?\d|$) 以确保输入字段包含数字。您的测试将不允许任何内容（似乎可以），或者只是一个点（不可以）。我的建议将允许：.5、5.、5 等以及空字符串。如果字符串不应该为空，请删除|$。
另外，最好不要修改输入的字段。 OP 通过通知用户而不是更新值做得很好：使用您当前的代码，用户将无法轻松更正任何无效输入，因为您的代码会还原输入的值。
@Rob：这是一个棘手的问题，因为用户在输入（例如）.5 时仍然需要输入单个 .。我认为提交时需要额外的验证...
您更新的代码仍有问题：alert 对话框将阻止用户更新输入字段。这是一个很大的烦恼，如图所示这里：jsfiddle.net/ANRPy。
+1 表示努力和处理技巧。最后提示，您的辅助 RegExp 可以优化为：/^(?=.)\d*(?:[.,]\d+)?$/

【解决方案2】：

最简单的解决方案是这样的

// 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;
}

您可以编辑该函数以只接受一个字符串参数，但我选择让它接受文本输入元素。 RegEx 可以用任何东西代替，我为这个例子做了一个简单的。如果我是你，我会稍微改进一下 (You can use the excellent online tool RegExr)

这里是一个过滤器实现的例子

http://jsfiddle.net/kVV77/

【讨论】：

请不要（只是）参考外部网站。确保您的答案可以单独阅读。还; OP 没有指定在任何地方使用 jQuery。

【解决方案3】：

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

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

只允许任意数量的逗号和一个点.，条件是数字不能以逗号开头。号码开头可以有可选的+ 或-。

【讨论】：