Javascript：仅允许值小于输入的初始值

Question

on my form, I have many text input fields with pre-filled decimal values, the user can edit the values before submitting the form. 在我的表单上，我有许多带有预填充十进制值的文本输入字段，用户可以在提交表单之前编辑这些值。

I was wondering if there is anyway using javascript/jquery, to make each input allow only values less than its initial value. 我想知道是否无论如何都使用javascript / jquery，以使每个输入只允许小于其初始值的值。

I find it quite challenging, so I thought about posting it here. 我觉得它很有挑战性，所以我考虑过在这里发布它。 Thank you guys 感谢大伙们

Answer 1

Use jQuery Validation plugin 's max method . 使用jQuery Validation插件的max方法。

Example: 例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and 23 or smaller.</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">

</head>
<body>
<form id="myform">
<label for="field">Required, maximum value 23: </label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      max: $('your_input_selector').val()
    }
  }
});
</script>
</body>
</html>

Answer 2

This may help you: 这可以帮助您：

 var initialValue = $("#myTextbox1").val() $("#myTextbox1").on("input", function() { if($("#myTextbox1").val() > initialValue) { $("#myTextbox1").val(initialValue); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="myTextbox1" type="text" value="5"/>

Answer 3

This solution converts the input into a number, prevents default form action, checks if the input value is a number and if not it alerts the user and resets the default input value, checks to see if the new value is less the the original and if it is not it resets the input to the original value. 此解决方案将输入转换为数字，阻止默认的表单操作，检查输入值是否为数字，如果不是，它将提醒用户并重置默认输入值，检查新值是否小于原始值，以及是否不是，它将输入重置为原始值。

HTML 的HTML

<form id="myForm" action="">
    <input type="text" id="myValue" value="5" />
    <input type="button" id="myButton" value="validate" />
</form>

JavaScript 的JavaScript

var origVal = $('#myValue').val();

$('#myButton').on('click', function(e) {
        var getVal = Number($('#myValue').val());
        e.preventDefault();

        if (isNaN(getVal) === true) {
            alert('The input value has to be a number.');
            $('#myValue').val(origVal);
        }

        if (getVal > origVal) {
            alert('The input value has to be less than the original value of ' + origVal);
            $('#myValue').val(origVal);
        }
    });

Javascript：仅允许值小于输入的初始值

问题描述

3 个解决方案

解决方案1
2 2016-12-22 02:16:51

解决方案2
0 2016-12-22 02:22:58

解决方案3
0 2016-12-22 05:08:58

Javascript：仅允许值小于输入的初始值

问题描述

3 个解决方案

解决方案1 2 2016-12-22 02:16:51

解决方案2 0 2016-12-22 02:22:58

解决方案3 0 2016-12-22 05:08:58

解决方案1
2 2016-12-22 02:16:51

解决方案2
0 2016-12-22 02:22:58

解决方案3
0 2016-12-22 05:08:58