Number的输入验证（用户不能输入小于163）答案

【问题标题】：Input validation for Number (user cant input less than 163)Number的输入验证（用户不能输入小于163）
【发布时间】：2016-12-01 00:01:02
【问题描述】：

我想限制用户给出小于 163 的值。我已经试过了

<input type="text" class="inputnw" name="semesterCode" min="163" value="163" />

我使用了文本，因为我不想在输入框的右侧显示增量/减量。

我想要验证低于 163 的任何内容，并且用户只能输入数字。

【问题讨论】：

您应该将类型从文本更改为数字。
使用类型编号及其非常基本的信息，您可以从以下地址查看：w3schools.com/tags/att_input_min.asp
您可以为 blur 或 input 事件添加侦听器，如果值小于 163，则提供消息，例如 if (this.value < 163) /* show message */ .不要删除用户输入，让他们修复它。

标签： javascript jquery html

【解决方案1】：

您可以使用此脚本。每当您输入一个小于 163 的数字时，它都会提示“数字必须小于 163”

function myFunction(){
  var x = document.getElementById("number").value;
  if ( x.length > 2 && x < 163 ) {
    document.getElementById("error").innerHTML = "Please enter a number less than 163"
    return false 
  }else{
    return true
  }
}

<input type="text" id="number" class="inputnw" name="semesterCode"  onkeyup="myFunction()"/>
<span id="error" style="color:red"></span>

【讨论】：

工作。想要输入框错误代替“警报”。我该怎么办？ @shubham

【解决方案2】：

使用type=number 输入字段！确实可行且有效，使用如下样式禁用输入框的箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

Plunkr 示例：https://plnkr.co/edit/LaApGngTkJL14mmTmi78?p=preview

【讨论】：

【解决方案3】：

使用下面的 Jquery 代码（记住我假设您使用的是 Jquery），只需将此类“inputnw”应用于您想要进行此类验证的字段。

  $(document).ready(function () {
    $(document).on('keypress keyup blur', '.inputnw', function (event) {
        $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(event.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
            // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) ||
            // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }

        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }

        if ($(this).val().length >= 3) {
            if ($(this).val() < 163) {
                $(this).val('');
                alert('Please enter value greater than 163');
                $(this).focus();
            }
        }
    });

    $('.inputnw').blur(function () {
        if ($(this).val().length < 3) {
            if ($(this).val() < 163) {
                $(this).val('');
                alert('Please enter value greater than 163');
                $(this).focus();
            }
        }

    });
});

【讨论】：

重复$(this)很多次，执行一次并将结果分配给一个变量是非常低效的。此外，检查击键效率低下且不可靠，如果用户粘贴值或拖放值怎么办？只需测试该值。

【解决方案4】：

您可以将类型更改为数字并使用输入对象的有效性对象执行类似的操作

&lt;input type="number" class="inputnw" name="semesterCode" min="163" onblur="if(this.validity.rangeUnderflow)this.setCustomValidity('I expect 163');" /&gt;

【讨论】：

【解决方案5】：

您可以添加一个侦听器来检查基于某个事件的值。让用户自己修复值并使消息对用户友好：

function checkValue(){
  var errorEl = document.getElementById(this.id + 'Error');
  var message = 'Value must be ' + this.dataset.min + ' or greater';
  if (errorEl) {
    errorEl.textContent = +this.value >= +this.dataset.min? '' : message;
  }
}

window.onload = function() {
  var el = document.getElementById('semesterCode');
  el.addEventListener('input', checkValue, false);
}

.errorMessage {
  color: red;
  font-family: sans-serif;
  font-size: 80%;
}

<input name="semesterCode" id="semesterCode" data-min="163" value="163"><br>
<span id="semesterCodeError" class="errorMessage">

【讨论】：