1

我有一个 html 表单，其中包括两个需要在一定范围内取数字的数字字段。我正在尝试使用 min 和 max 属性来完成此操作

<input type="number" id="AutoApprovalDelayInSeconds" min="0" max="2592000" step="1" placeholder="Range: 0 to 2592000"/>
<input type="number" id="AssignmentDurationInSeconds" min="30" max="31536000" step="1" placeholder="Range: 30 to 31536000" required/>

但是当我输入无效输入的表单时，它提交时没有错误显示或警告。我知道 number 属性只是数字的字符串表示形式，而不是整数或其他数字数据类型，所以我必须以某种方式使用 javascript 转换此输入，还是我做错了其他事情？谢谢！

编辑。我最初尝试在 Firefox 中打开它，但我现在知道它不支持此功能。

4

2 回答 2

3

请记住，input[type='number'] 许多浏览器不支持HTML5 ，实际上只有 Chrome 和 IE10（注意：不支持 Firefox）。

使用 Chrome 我被限制发布表单，但在许多其他浏览器上你不会。如果您确实需要按数字限制用户输入，并且想要进行一些验证，那么我建议您使用 JavaScript（可能是jQuery Validate）。

于 2013-07-24T23:47:29.867 回答
2

假设表单名称是form这是一个准系统脚本。您应该考虑将输入类型更改为文本，这样您就不必担心跨浏览器兼容性

<form id="form">
 <input type="text" id="AutoApprovalDelayInSeconds" step="1" placeholder="Range: 0 to 2592000">
 <input type="text" id="AssignmentDurationInSeconds" step="1" placeholder="Range: 30 to 31536000" required>
</form>

JS

 var delay, duration, form;
     delay = document.getElementById('AutoApprovalDelayInSeconds');
     duration = document.getElementById('AssignmentDurationInSeconds');
     form = document.getElementById('form');


 form.onsubmit = function (e) {
   e.preventDefault();
   delay = parseFloat(delay.value);
   duration = parseFloat(duration.value);
   if(delay < 0 || delay > 2592000 || isNaN(delay)) {
     delay.focus();
     alert('AutoApprovalDelayInSeconds is invalid');
     return;
   }
   if(duration < 30 || duration > 31536000 || isNaN(duration)) {
     duration.focus();
     alert('AssignmentDurationInSeconds is invalid');
     return;
   }
   // all input appears to be valid so send it
   form.submit(); 
 };
于 2013-07-24T23:52:28.967 回答