Question

我有一个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!')
};

Answer 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。~~

Answer 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/

Answer 3

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

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

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

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

3 个答案: