HTML输入类型号Min Max不起作用chrome答案

【问题标题】：HTML input type number Min Max not working chromeHTML输入类型号Min Max不起作用chrome
【发布时间】：2017-07-25 00:11:18
【问题描述】：

以下代码都不适合我

      <input type="number" min="0" max="100" step="5">  
      <input type="number" name="font-size" min="1" max="32">

在我的记事本中，最小值和最大值不是红色，它们只是黑色。我已经完全按照我的方式复制了它。

使用谷歌浏览器和我看到的任何地方都是这种格式，但它对我不起作用。知道我可能做错了什么，重要的是我能够限制这些值。谢谢！

【问题讨论】：

标签： php html max min

【解决方案1】：

当您尝试提交表单时它会起作用。如果你想限制实时，你需要使用Javascript。

<form action='' method='post'>
    <input type="number" name='n' min="0" max="100" step="5">  
    <input type="number" name="font-size" min="1" max="32">
    <button>Submit</button>
</form>

即使 HTML5 输入限制有效，您也需要检查 PHP 代码中的输入是否正确。

$error = "";
if ( isset($_POST['n']) && isset($_POST['font-size']) ) {
     if ($_POST['n'] % 5 != 0 || $_POST['n'] < 0 || $_POST['n'] > 100) {
         $error = "Number must be between 0 and 100 and divisible by 5";
     }

     if ($_POST['font-size'] < 1 || $_POST['font-size'] > 32) {
         $error = "Font size must be between 1 and 32";
     }
}

if (empty($error)) {
    // do your logic here
}

然后您可以在表单中显示错误

<?php echo $error; ?>
<form action='' method='post'>
    <input type="number" name='n' min="0" max="100" step="5">  
    <input type="number" name="font-size" min="1" max="32">
    <button>Submit</button>
</form>

【讨论】：

当我提交表单时它不起作用，我使用的是 PHP，它让我即使在提交表单后也可以输入 115 120 130+ 之类的值。有没有办法使用 PHP 实时限制？