防止无效用户输入的Javascript答案

【问题标题】：Javascript to prevent invalid user input防止无效用户输入的Javascript
【发布时间】：2011-01-16 17:05:22
【问题描述】：

我编写了一组 javascript 函数，允许我验证表单上的用户输入。我只想接受有效的输入，并强加以下行为：

当用户输入无效表单时，我会显示警报并通知他们输入的值不正确。至关重要的是，表单中的原始（有效）值没有改变。

只有在值被验证后才会更改值。

例如，假设我想在一个字段中只接受正整数。

这是描述所需行为的事件序列。

场景 1（有效输入）

在输入字段中使用有效默认值加载表单
用户输入有效号码
输入字段值已更新（按照正常的表单行为）

场景 2（无效输入）

在输入字段中使用有效默认值加载表单
用户类型无效
显示警告框 alert('Invalid value')
输入字段值未更改（即该值与用户输入无效数字之前的值相同）

[编辑]

我目前面临的唯一问题（即这个问题正在寻求答案）是场景 2，行动点 4。更具体地说，问题退化为以下问题：

如果我（以某种方式）确定用户输入的值无效，如何阻止字段值发生变化。这是真的，我只想回答。

我也在做服务器端检查，这个问题只是关于前端 - 即如果我确定该值不正确，则拒绝更改字段（表单文本输入）值。

顺便说一句，我正在使用 jQuery，并希望以一种将行为与显示分开的方式来实现这一点（我认为这就是术语“不引人注目”的意思？）

任何关于如何实现上述行为的建议，我们将不胜感激。

PS：我不想为此使用另一个 jQuery 插件。我应该可以使用 jQuery + 我已经编写的简单的 javascript 验证函数。

【问题讨论】：

如果用户每次输入错误或输入错误值时都会收到警告框，因为这会改变焦点，您可能会惹恼用户。我会在字段旁边发出通知。
是的，你可能是对的。但由于我不想改变值（我想保留旧的 CORRECT 值），也许我可以只更改输入字段的背景颜色（表示它不被接受），同时保持旧值。另一方面，如果该值被接受，我认为将背景颜色更改为另一种颜色以表明它已被接受会很酷。我认为如果颜色变化在变回白色之前持续几秒钟会很有用，作为视觉线索。我希望有人阅读此评论并展示如何做类似的事情:)
您不应该只更改颜色来指示错误：始终还应使用描述性错误消息（例如，在无效输入上方）。
顺便说一句，不要依赖 JavaScript 进行验证：它可能已关闭/根本不可用。总是检查服务器端的输入！

标签： javascript jquery

【解决方案1】：

加载页面时，您不能创建一个隐藏的表单值或 js 变量来存储字段的初始/默认值吗？当他们更改表单字段时，对其进行验证，如果通过，则更新隐藏字段或 js 变量以匹配他们更新的字段中的内容。

当用户提供的输入验证失败时，显示无效条目以及错误消息，然后将表单字段更新回您保存的值，这将是默认值或他们输入的最后一个有效值。

编辑：
请注意，这只是我在上面的回答中解释的一个快速且（非常）肮脏的示例。如果您有很多输入，您可能希望将值存储在关联数组中而不是隐藏形式的值中，但这应该可以让您很好地理解我的建议。我也强烈建议您不要使用警告框来通知无效答案。

<html>
<head>
<script type="text/javascript">
    function validate()
    {
        var field1 = document.getElementById("field1");
        var saved  = document.getElementById("field1_save");
        if (field1.value < 0 || field1.value > 10)
        {
            alert("Field1 value of " + field1.value + " is invalid");

            // Change the value back to the previous valid answer
            field1.value = saved.value;
            return false;
        }

        // Save the valid input
        saved.value = field1.value;
        return true;
    }
</script>
</head>

<body>
Test User Input

<form name="form1"   id="form1" method="post">
<input name="field1" id="field1" type="text" value="2" onblur="validate();"/>
<input name="field1_save" id="field1_save" type="hidden" value="2" />

<input name="btnSubmit" type="submit" value="Submit" />                             
</form>
</body>
</html>

【讨论】：

我想我在最初的问题中没有让自己足够清楚。我将编辑我的问题以进一步澄清我的问题所在。具体来说，问题只涉及场景 2，行为 4。
我不明白为什么 RC 的解决方案不能回答您的问题。毕竟，您必须（1）允许编辑字段中的当前值随着用户输入数据而改变，并且（2）确定用户已完成输入数据，然后才能进行验证。当然，您可能希望验证用户输入的每个字符，而不是等待他完成，在这种情况下，您的 javascript 验证函数将在编辑字段的 onChange 事件而不是 onBlur 事件中调用。
我已经用一个例子更新了我的答案。希望这能更直接地回答您的问题。