知方号

知方号

:输入(表单输入)元素

:输入(表单输入)元素

警告:客户端验证是有用的,但它并不能保证服务器会收到有效的数据。如果数据必须是特定的格式,总是应该在服务器端进行验证,如果格式无效,则返回一个 400 HTTP 响应。

除了如上文 UI 伪类部分所述,使用 CSS 根据 :valid 或 :invalid 每个输入的当前状态来设计输入的样式之外,浏览器还在(试图)提交表单时提供了客户端验证。在表单提交时,如果有一个表单控件没有通过约束验证,支持的浏览器将在第一个无效的表单控件上显示一个错误信息;根据错误类型显示一个默认信息,或者由你设置的信息。

某些输入类型和其他属性对特定输入的有效值进行了限制。例如, 意味着只有数字 2、4、6、8 或 10 有效。某些错误可能发生,当值小于 2 时会发生 rangeUnderflow 错误,值大于 10 时会发生 rangeOverflow 错误,当值在 2 至 10 之间,但不是偶数(不满足 step 属性的需求)时会发生 stepMismatch 错误,如果值不是一个数字时会发生 typeMismatch 错误。

对于可能的值域是周期性的输入类型(也就是说,在可能的最高值时,值会绕回开始而不是结束),max 和 min 属性的值有可能是相反的,这表明允许的值范围从 min 开始,绕到可能的最低值,然后继续下去直到达到 max。这对日期和时间特别有用,比如你想让范围从晚上 8 点到早上 8 点:

html

特定的属性和它们的值会导致一个特定的错误 ValidityState:

Validity 对象的错误取决于 的属性及其值: 属性 相关属性 描述 max validityState.rangeOverflow 当值大于 max 属性所定义的最大值时发生 maxlength validityState.tooLong 当字符数大于 maxlength 属性所允许的数量时发生 min validityState.rangeUnderflow 当值小于 min 属性所定义的最小值时发生 minlength validityState.tooShort 当字符数小于 minlength 属性所允许的数量时发生 pattern validityState.patternMismatch 当模式属性包含一个有效的正则表达式,而 value 与之不匹配时发生 required validityState.valueMissing 当 required 存在时,但是值为 null 或单选钮、复选框未选中时发生 step validityState.stepMismatch 值不满足步进增量。增量默认值为 1,所以对于 type="number" 来说,只有整数才有效,step="any" 永远不会抛出这个错误。 type validityState.typeMismatch 当值的类型不正确时发生,例如,电子邮件不包含 @,或者不包含协议的 url。

如果一个表单控件没有 required 属性,没有值,或者是一个空字符串,都不是无效的。即使上述属性存在,除了 required 之外,和空字符串也不会导致错误。

我们可以对接受的值进行限制,支持的浏览器会对这些表单的数值进行原生验证,并在表单提交时提醒用户是否有错误。

除了上表中描述的错误外,validityState 接口还包含 badInput、valid 和 customError 布尔值只读属性。有效性对象包括:

validityState.valueMissing validityState.typeMismatch validityState.patternMismatch validityState.tooLong validityState.tooShort validityState.rangeUnderflow validityState.rangeOverflow validityState.stepMismatch validityState.badInput validityState.valid validityState.customError

对于这些布尔属性中的每一个,值为 true 表示指定的验证可能失败的原因是真实的,但 valid 属性除外,如果元素的值服从所有的约束,则为 true。

如果有错误,支持的浏览器会提醒用户,并阻止表单的提交。需要注意的是:如果自定义错误被设置为一个真值(除了空字符串或 null 以外的任何值),表单将被阻止提交。如果没有自定义错误信息,并且其他属性都没有返回真值,那么 valid 将为真,表单可以被提交。

jsfunction validate(input) { let validityState_object = input.validity; if (validityState_object.valueMissing) { input.setCustomValidity("需要一个值"); } else if (validityState_object.rangeUnderflow) { input.setCustomValidity("值太小了"); } else if (validityState_object.rangeOverflow) { input.setCustomValidity("值太大了"); } else { input.setCustomValidity(""); }}

最后一行,将自定义的有效性信息设置为空字符串是至关重要的。如果用户出错,而有效性被设置,即使所有的值都是有效的,也会提交失败,直到消息为 null。

自定义验证错误示例

如果你想在一个字段验证失败时显示一个自定义的错误信息,你需要使用约束验证 API,在 (及相关)元素上可用。以下面的表格为例:

html 输入用户名(允许使用大小写字母): 提交

如果你试图提交的表单没有填写有效的内容,或者是一个不符合 pattern 的值,基本的 HTML 表单验证功能将使其产生一个默认的错误信息。

如果你想转而显示自定义的错误信息,你可以使用下面这样的 JavaScript 代码:

jsconst nameInput = document.querySelector("input");nameInput.addEventListener("input", () => { nameInput.setCustomValidity(""); nameInput.checkValidity();});nameInput.addEventListener("invalid", () => { if (nameInput.value === "") { nameInput.setCustomValidity("输入一个用户名!"); } else { nameInput.setCustomValidity("用户名只能包含大写或小写字母,请再试一遍。"); }});

此示例会像这样渲染:

简单来说:

每次输入元素的值发生变化时,我们通过 input 事件处理程序运行 checkValidity() 方法来检查其有效状态。 如果值是无效的,会引发 invalid 事件,运行 invalid 事件处理函数。在这个函数中,我们使用 if() 块来决定值无效是因为它是空的,还是因为它不符合模式,并设置一个自定义的有效性错误信息。 因此,如果在按下提交按钮时,输入值是无效的,将显示其中一个自定义错误信息。 如果它是有效的,它就会像你所期望的那样提交。要做到这一点,必须取消自定义的有效性,通过使用空字符串调用 setCustomValidity() 来实现。我们在每次 input 事件发生时都要这样做。如果你不这样做,并且之前设置了一个自定义的有效性,那么输入将会认为无效,即使它目前包含一个有效的提交值。

备注:始终在客户端和服务器端验证输入约束。约束验证并不能消除在服务器端进行验证的必要性。无效的值仍然可以由旧的浏览器或坏的行为者发送。

备注:Firefox 在许多版本中支持一个专有的错误属性——x-moz-errormessage,它允许你以类似的方式设置自定义错误信息。从第 66 版开始,这个属性已被移除(见Firefox bug 1513890)。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。