119

通过阅读这篇文章，我发现 HTML5 中引入了一些用于“有效”和“无效”输入值的伪类。

有没有办法可以将输入字段标记为来自 javascript 的无效/有效？或者，我可以覆盖使用的验证方法吗？

4

3 回答 3

203

为此，您可以使用 customValidity 函数。

如果您将 customValidity 消息添加到该字段，它将变为无效。当您将消息设置为空字符串时，它再次变为有效（除非由于其他原因而无效）。

field.setCustomValidity("Invalid field.");将使该字段无效。

field.setCustomValidity("");将使该字段有效，除非它未能通过 HTML5 约束。

于 2013-09-18T22:09:30.730 回答
5

编辑：有人澄清说您正在寻找 DOM 的“有效”“无效”属性。

我会使用dom_object.setAttribute("isvalid", "true"). 您还可以有一个中央验证功能，每次更新这些属性（并dom_object.getAttribute("isvalid")每次使用）。

您可以在每次元素失去焦点时或任何时候运行此函数。

不完全优雅，但不幸的是，现在没有对 javascript 和 HTML5 的“伪”支持。

如果我理解您的问题，您可以使用 Javascript 进行验证。但是，请注意，绕过客户端验证非常容易，尤其是 javascript 验证。您永远不应该信任客户端数据，并始终在服务器端进行检查。

例如，我可以通过检查源代码轻松找到元素 ID，然后document.getElementById('some_id').setAttribute('max', new_number)更改最大值（这是您链接中的条目之一）。

有多种方法可以做到这一点，所以我将尝试为您提供一般习语。

您可以通过执行获取值document.getElementById('form_element_id').value（确保提供name发送到服务器的表单 a 以及idjavascript 使用的表单）。对于文本区域，您可以使用.innerHTML.

然后你有一个变量中的值，有多种方法可以检查它。

例如，您可以执行if (parseInt(my_value) < 0) //error. 您也可以使用正则表达式，我不会全部解释，但您可以从这里开始http://www.w3schools.com/jsref/jsref_obj_regexp.asp。我知道 w3schools 不是最好的来源，但我发现它是一个不错的起点。

现在对于验证部分：添加onsubmit="return validateForm()到您的表单标签，其中 validateForm() 是执行所有检查的函数。true如果有效，则该函数仅返回，false否则返回。这会覆盖默认的验证功能（默认情况下什么都不做）。

所以在上面的例子中，//error将被替换为return false. 你也可以做其他事情；例如警告错误然后返回false。您还可以使用 javascript 突出显示无效字段（不确定这是否是您所说的“将输入字段标记为来自 javascript 的无效/有效”的意思）

当然，如果您不想检查所有字段，则只需在某些字段通过时返回 true。同样，你不应该依赖这个，但如果你只是想阻止普通人，那么这是一个简单的解决方案。

于 2012-05-27T23:42:32.790 回答
-18

有没有办法可以将输入字段标记为来自 javascript 的无效/有效？

不幸的是，您不能在 JavaScript 中设置伪类的样式，因为它们不是真正的元素，它们不存在于实际的 DOM 中。

使用 vanilla JavaScript，您将使用验证 API。

在 jQuery 中，您可以简单地执行此操作，http://jsfiddle.net/elclanrs/Kak6S/

if ( $input.is(':invalid') ) { ... }

或者，我可以覆盖使用的验证方法吗？

如果您使用 HTML5 验证，请坚持使用标记。否则，您可以禁用 HTML5 验证$form.attr('novalidate', 'novalidate')并使用 JS 来验证您的字段，然后在需要的地方添加valid或类。invalid我制作了一个像这样工作的插件来支持非 HTML5 浏览器。

于 2012-05-27T23:45:31.630 回答