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

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