使用 JavaScript 进行即时表单验证

HTML5 引入了一些新属性来实现基于浏览器的表单验证。该属性是一个正则表达式，定义元素和大多数类型pattern的有效输入范围。该属性指定字段是否为必填字段。对于没有实现这些属性的旧版浏览器，我们可以使用它们的值作为 polyfill 的基础。我们还可以使用它们来提供更有趣的增强功能——即时表单验证。textareainputrequired Backward Skip 10s Play Video Forward Skip 10s 我们必须非常小心，不要得意忘形，创建过于激进的验证，破坏自然浏览行为并妨碍人们。例如，我见过一些表单无法Tab离开无效字段——使用（或者更确切地说是滥用）JavaScript 来强制焦点停留在字段内，直到它有效为止。这是可用性非常差的，并且直接违反了可访问性指南。 我们在本文中要做的事情的干扰性要小得多。它甚的那样）几乎与 Firefox 现在本地所做的事情相同！ 基本概念 在最新版本的 Firefox 中，如果required字段为空或其值与不匹配，pattern则该字段将显示红色轮廓，如下图所示。




Firefox 16 中的无效字段指示 Learn to Code with JavaScript 当然，这不会立即发生。如果是这样，那么默认情况下每个必填字段都会有该大纲。相反，这些轮廓仅在您与场交互后才会显示，这基本上（尽管不精确）类似于事件onchange。 这就是我们 WhatsApp 号码数据 要做的，用作onchange触发事件。作为替代方案，我们可以使用该oninput事件，只要在字段中键入或粘贴任何值，该事件就会触发。但这确实太即时了，因为它很容易在打字时快速连续地触发和关闭多种类型，从而产生闪烁效果，这对于某些用户来说会很烦人或不可能分散注意力。而且，在任何情况下，oninput都不会从程序输入中触发，而程序输入会onchange触发，我们可能需要它来处理第三方附加组件的自动完成之类的事情。 定义 HTML 和 CSS 那么让我们看一下我们的实现，从它所基于的 HTML 开始 此示例是一个简单的评论表单，其中某些字段是必填字段，某些字段是经过验证的，有些字段两者都是。这些领域required还具有aria-required, 为不理解新input类型的辅助技术提供后备语义。




ARIA规范还定义了一个aria-invalid属性，我们将用它来指示字段何时无效（HTML5 中没有等效的属性）。该aria-invalid属性显然提供了可访问的信息，但它也可以用作 CSS 挂钩来应用红色轮廓 因此，如果字段是必需的但没有值，或者它具有模式和值但该值与模式不匹配，则该字段无效。 由于pattern已经定义了正则表达式的字符串形式，我们所要做的就是将该字符串传递给RegExp构造函数，这将创建一个我们可以针对该值进行测试的正则表达式对象。但是，我们必须预先测试该值以确保它不为空，以便正则表达式本身不必考虑空字符串。 一旦确定某个字段是否无效，我们就可以控制其aria-invalid属性来指示该状态 - 将其添加到尚不具有该字段的无效字段，或将其从已具有该字段的有效字段中删除。简单的！最后，为了将这一切付诸实践，我们需要将验证函数绑定到onchange事件。