javascript - 如果输入字段不是数字或不为空，请替换为数字

Question

我有一个输入字段，我正在使用 .on('input') 函数监视它的更改，因为它涵盖了 .change 和 .keyup。

没有提交按钮，但我只想根据输入的内容更改输入字段的行为。

我稍后将验证服务器端，我使用的是 html5 type='number'。

我只希望该字段能够保存一个数字，或者它可以为空。例如，用户可能想要清空内容以键入数字 15。

但是，我不希望接受任何其他字符 - 如果输入了这些字符，则应显示提示，通知用户这一点，并且该字段默认返回其起始值 1。

HTML

<input type="number" class="input-field" placeholder="" value="1" min="1">

JS

$(document).ready(function ($) {

    var num = $('input[type="number"]').val();

    $('input[type="number"]').on('input', function () {
        var num = $(this).val();

        if (num < 1 || isNaN(num) || num !== '') {
            alert(num + ' is not a number or is less than 1');
            $(this).val(1);
        }

    });
});

我已尝试使用上面的代码，但它不允许有空字段。我也尝试过if (num < 1 || isNAN(num) || num.length != 0) {

我需要使用 .replace()与正则表达式。我一直在看这里的几个问题，例如 here但考虑到我正在测试空字符串，我不确定这就是我正在寻找的东西。

JSFIDDLE

Answer 1

您可以使用constraint validation API :

$('input[type="number"]').on('input', function () {
    if (!this.validity.valid) {
        alert(this.value + ' is not a number or is less than 1');
        this.value = 1;
    }    
});

$('input[type="number"]').on('input', function () {
    if (!this.validity.valid) {
        alert(this.value + ' is not a number or is less than 1');
        this.value = 1;
    }    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" class="input-field" placeholder="" value="1" min="1">

但是请注意，这种行为很唐突。如果用户输入了错误的键，您将通过模式对话框惹恼他并清除该数字。

考虑什么都不做。如果输入无效，HTML5 浏览器将不会发送表单。