Question

我想限制用户提供低于163的值。我已经尝试了

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

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

我希望验证163以下的任何内容，用户只能输入数字。

Answer 1

使用下面的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();
            }
        }

    });
});

Answer 2

您可以使用此脚本。每当您输入小于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>

Answer 3

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

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

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

Answer 4

您可以添加侦听器以根据某些事件检查值。让用户自己修复该值并使消息用户友好：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您可以使用输入对象的有效性对象

将类型更改为数字并执行类似操作

＆＃13;

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

＆＃13;

Number的输入验证（用户输入小于163）

5 个答案: