php - HTML5 <input> type = number 防止用户违反最小 =""或最大 =""值

Question

首先，您可以手动输入一个不同的数字，然后您可以在特定值之上或之下。您也可以检查元素并自己设置不同的最小值或最大值。我将如何验证这一点？或者我应该只检查 SQL 的值是 0 还是 1。

这是我现在的代码:

<form action="" method="post" class="-koowa-form">
    <div>
        <div>
            <input  type="text" name="naam" id="naam" size="40" maxlength="255" value="<?= $test->naam; ?>" placeholder="<?= translate( 'naam' ); ?>" />
            <input  type="text" name="kleur" id="kleur" size="40" maxlength="255" value="<?= $test->kleur; ?>" placeholder="<?= translate( 'kleur' ); ?>" />
            <input  type="number" name="active" id="active" size="40" min="0" max="1" value="<?= $test->active; ?>" placeholder="<?= translate( 'active' ); ?>" />
        </div>
        <input type="color" name="kleurcode" value="<?= $test->kleurcode; ?>"  
    </div>
</form>

我现在拥有的东西似乎非常困惑，我看到 3 年前关于这个问题的帖子。想知道是否有一个简单干净的修复方法，或者我应该做不同的事情。

编辑:澄清一下，我知道它显然必须在后端进行检查，但我也想让它在前端正常工作。这看起来非常草率和不专业。

修复:现在我已经完成了这个，稍后使用 jquery 添加验证错误消息

编辑:修复是可怕的添加了一个可重用的 javascript 现在只修复

<script type="text/javascript">
function checkMinMax(event) {
    var value = this.value,
        min = this.getAttribute('min'),
        max = this.getAttribute('max');

    if(value < min)
        this.value = min;
    else if(value > max)
        this.value = max;
}

window.addEventListener('load', function() {
    document.getElementById('active').addEventListener('keyup', checkMinMax);
});

Answer 1

您只能在服务器端安全地检查这些东西。在客户端，一切都由客户端控制。 HTML代码可以在客户端修改，javascript代码可以在客户端修改。
所以没有你的服务器从客户端接收到的东西是可以保证的!这是网络安全的第一课。必须使用 PHP 等服务器端语言在服务器端检查有效输入。

前端只能让用户“轻松”输入有效数据。为此，发明了很多东西，例如 min,max,type="number", required 等。但这取决于浏览器实际实现和支持这些东西的程度。所以是的，从前端跨浏览器的角度来看，我们还有很长的路要走才能让它看起来不那么凌乱。

为了让它在“所有”浏览器中工作(我从不在“所有”中包含 IE)，您可以对您的输入使用各种 javascript 检查以确保 min 和 max 没有被违反。
一个很好的方法是在输入上放置一个 oninput 监听器，在 html 中使用 oninput="validate()"。然后使用类似 valBetween 的函数(见下文)来设置新值。

function validate() {
    this.value = valBetween(this.value, this.min, this.max);
}

function valBetween(v, min, max) {
    return (Math.min(max, Math.max(min, v)));
}