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

Numeric validation with RegExp to prevent invalid user input

本文关键字：无效 输入 用户 RegExp 数字 验证 使用      更新时间：2023-09-26

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

我试图修改该函数以使用RegExp，并不是验证"每个字符"，而是验证"每个完整输入"，这样它就可以做同样的事情，但条件不同：

  1. 仅限数字
  2. 允许使用小数"."或"，"

以下是当前形式的函数，使用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!')
};

为了进行所需的验证，您需要监听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中不起作用）。

编辑：当然，显示错误消息而不是将输入字段重置为以前的值也是完全可能的（更新的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

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

// 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可以被任何东西取代，我为这个例子做了一个简单的例子。如果我是你的话，我会对它进行一点改进（你可以使用优秀的在线工具RegExr）

以下是滤波器实现的示例

http://jsfiddle.net/kVV77/

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

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

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

相关文章：