Php 设置文本框的最大值和最小值

我拥有一个画布网站，希望我的客户能够在设定范围内输入画布的自定义长度

假设该产品的范围为：

最小：10厘米 最大：200厘米 然后在文本框中，他们可以输入该范围内的任何数字，但如果他们输入215，则该数字将自动下降到200。同样，如果他们输入7，那么它将自动上升到10

document.getElementById('textBoxID').onchange = function(){
      if(this.value > 200){
           this.value = 200;
      }
      if(this.value < 10){
           this.value = 10;
      }
}

---

下面是一个小例子：

查找下面基于jQuery的代码

   <script type="text/javascript" src="jquery-1.5.1.js"></script>
    <style>
    #customForm input.error{
        background: #f8dbdb;
        border-color: #e77776;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
        //global vars
        var form = $("#customForm");    
        var canvas = $("#canvasID");
        var canvasInfo= $("#canvasInfo");
        //On blur   
        canvas.blur(validateCanvas);    

        //On Submitting
        form.submit(function(){
            if(validateCanvas())
                return true
            else
                return false;
        });

        function validateCanvas(){
            //if it's NOT valid
        if(canvas.val()< 10 || canvas.val()>200){
            if(canvas.val()< 10) {
                canvas.val('10');
            }
            if(canvas.val()>200) {
                canvas.val('200');
            }
                canvas.addClass("error");
                canvasInfo.text("We want canvas Minimum: 10 cm and Maximum: 200 cm");           
                return false;
            }
            //if it's valid
            else{       
                canvas.removeClass("error");
                canvasInfo.text("");
                return true;
            }
        }   
    });
 </script>

---

输入文本字段具有maxlength属性，但没有minlength。您可以在其中放入一些javascript来检测不足的数据，只要在之后对服务器端执行相同的检查，onchange与blur一起启动，因此用户体验可能不是最佳选择greatest@locrizak所以改用onkeyup——尽管当用户输入的第一个数字总是在下面时，这会毁掉一切10@Neal，您应该添加到也使用$'textBoxID'。numeric来防止非数字字符。@Justin-库是从哪里来的？关于纯javascript的问题…@Justin-您也可以使用纯js添加这种类型的验证。只是需要更多的工作^ ^ ^这似乎是一种更令人困惑的方式来做我在回答中所做的事情——而且内联js并不总是解决问题的最佳方式go@Neal，你的建议肯定更好。我只是想展示内联方式。我也意识到这与OP的问题无关好的一点Neal谢谢，是我的错误我更新了错误的内容。但现在我已经更新了我的脚本

   <script type="text/javascript" src="jquery-1.5.1.js"></script>
    <style>
    #customForm input.error{
        background: #f8dbdb;
        border-color: #e77776;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
        //global vars
        var form = $("#customForm");    
        var canvas = $("#canvasID");
        var canvasInfo= $("#canvasInfo");
        //On blur   
        canvas.blur(validateCanvas);    

        //On Submitting
        form.submit(function(){
            if(validateCanvas())
                return true
            else
                return false;
        });

        function validateCanvas(){
            //if it's NOT valid
        if(canvas.val()< 10 || canvas.val()>200){
            if(canvas.val()< 10) {
                canvas.val('10');
            }
            if(canvas.val()>200) {
                canvas.val('200');
            }
                canvas.addClass("error");
                canvasInfo.text("We want canvas Minimum: 10 cm and Maximum: 200 cm");           
                return false;
            }
            //if it's valid
            else{       
                canvas.removeClass("error");
                canvasInfo.text("");
                return true;
            }
        }   
    });
 </script>