html5 input required oninvalid,为什么我的“ oninvalid”属性会让模式失败？

尽管此问题的答案提供了很好的信息，但仍不足以满足我的需求。根据哪个有效性规则失败，我需要显示不同的消息。在其他示例中，所有验证失败均使用相同的验证失败消息。

表单对象的“有效性”属性是创建多个验证失败消息的关键。

您可以在此网站上查看所有不同的“有效性”属性。

https://www.w3schools.com/js/js_validation_api.asp

本示例说明如何显示两个不同的验证消息。如果取消注释下面的console.log()行，则可以在输入字段时观察有效性属性的变化。

New Password:

pattern=".{6,}"

value=""

required

οninput="

setCustomValidity('');

checkValidity();

// console.log(validity);

if (validity.patternMismatch) {

setCustomValidity('Please enter at least six characters.');

}

else if (validity.valueMissing) {

setCustomValidity('This field is required.');

}

else if (validity.valid) {

setCustomValidity('');

}

// allow default validation message to appear for other validation failures

注意：一些有效性检查是特定于“类型”的。例如，如果type使用它们，则设置“ rangeOverflow”，“ rangeUnderflow”和“ stepMismatch”属性；输入=“ number”。

html5 input required oninvalid,为什么我的“ oninvalid”属性会让模式失败？相关推荐

HTML5 input元素新的特性
在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...
html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
HTML5 input属性
1.value 属性 value 属性规定输入字段的初始值 2.readonly属性 readonly属性规定输入字段为只读 3.disabled属性 disabled 属性规定输入字段是禁用的. 被 ...
HTML5 input 类型
HTML5 Input 类型 HTML 4.01 与 HTML 5 之间的差异以下类型是 HTML5 中的新类型:color, date, datetime, datetime-local, mon ...
Html5新特性与不支持的旧属性
HTML 标准自1999年12月发布的 HTML 4.01 后,后继的 HTML 5 和其它标准被束之高阁,为了推动web标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext ...
html5 微格式,HTML5抢鲜:微格式及相关的属性名称。
HTML5抢鲜:微格式及相关的属性名称 2004年5月29日,在我退休的博客和所有的大话 ,当我调查40个设计师的网站,看看他们为公共页面元素使用的约定,如标题和横幅,导航,内容和页脚(那时候的结果 ...
css input光标粗细,如何用CSS原生属性caret-color改变input输入框光标颜色
表单对大家来说并不陌生,当然,我也不是来和大家聊怎么做表单或者处理表单的样式网格,因为这些对于大家来说都是小儿科的东西.而是来聊聊怎么改变表单控件中光标的颜色.日常开发中我们可能会有改变input光标 ...
html5 输入框有值无效,HTML5基础 input required 输入框内必须有内容
OS : Windows 10 browser : Chrome 83.0.4103.116 editor : Visual Studio Code 1.46.1 typesetting : Mark ...
HTML5 中的 input 元素的输入类型（type 属性的取值）
目录输入类型:text 输入类型:image 输入类型:reset 输入类型:password 输入类型:submit 输入类型:radio 输入类型:checkbox 输入类型:button 输入 ...

html5 input required oninvalid,为什么我的“ oninvalid”属性会让模式失败？

html5 input required oninvalid,为什么我的“ oninvalid”属性会让模式失败？相关推荐

最新文章

热门文章