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()与Regexr一起使用。我一直在看这里的一些问题，比如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浏览器将不会发送表单。

Answer 2

HTML5答案肯定更优雅。

但是如果你想提供更多支持，这通常是我在尝试验证数字时所采用的路线。

请注意，我使用的是data-min属性，但如果您想切换，则可以始终使用$.attr()来获取min=""属性。

$(document).ready(function ($) {
    $('input[type="number"]').on('change', function () {
        var min = parseInt(this.dataset.min),
            num = isNaN(parseInt(this.value)) ? 0 : parseInt(this.value),
            clamped = Math.max(num, min);

        if(num != clamped) {
            alert(num + ' is less than 1');
            this.value = clamped;
        }
    });
});

jsfiddle

如果输入字段不是数字或非空，则用数字替换

2 个答案: