HTML5 最小最大验证 - firefox答案

【问题标题】：HTML5 min max validation - firefoxHTML5 最小最大验证 - firefox
【发布时间】：2013-12-26 21:10:11
【问题描述】：

我想使用 HTML5 min max 验证，但是这段代码：

<input id='quantity' name='quantity' type='number' min='0' max='5' />

不适用于火狐。所以我写了js脚本，但这也行不通。怎么了？

<input id='quantity' name='quantity' type='number' pattern='[1-9]*' oninput='check();'

<script language='javascript' type='text/javascript'>
function maxLength() {
    var quantity = document.getElementById('quantity');
    if (parseInt(quantity.value) > 5) {
        quantity.setCustomValidity('Alert');
    } else {
        quantity.setCustomValidity('');
    }
}
</script>

【问题讨论】：

HTML 代码不起作用，因为您没有将验证放在表单标签中。 JavaScript 不起作用，因为您没有将值更改为数字，我相信。
试试q.setCustomValidity('Alert'); 而不是quantity.setCustomValidity('Alert');
我编辑了我的代码（和我的帖子），但它仍然无法正常工作。

标签： javascript html validation

【解决方案1】：

您的代码按原样运行。

我想你忘了在文档开头提到<!doctype html>。

【讨论】：

【解决方案2】：

您必须在表单标签内编写 HTML 验证

<form>
   <input id='quantity' name='quantity' type='number' min='0' max='5' />
</form>

【讨论】：

【解决方案3】：

您可以编写一个onkeydown 或onkeypress 事件来检查被按下的键。

document.getElementById("quantity").onkeypress = function(e){

   //for browser compatibility
   var keyCode = e.keyCode || e.charCode || e.which;
   if(keyCode<48||keyCode>53)
    {      
          //suppress the key or do whatever else you want with it
          return false;
    }

}

我没有检查过这段代码，所以不要相信它，但这应该会有所帮助。

【讨论】：

【解决方案4】：

这里是ff上的工作代码

function maxLength() {
    var obj = document.getElementById('quantity');
    var max = obj.getAttribute('max');
    var min = obj.getAttribute('min');
    if (obj.value > max || obj.value < min) {
        obj.setCustomValidity('Alert ');
    } else {
        obj.setCustomValidity('');
    }
}

demo

【讨论】：