HTML oninvalid 事件属性

[


  HTML 事件属性

HTML oninvalid 事件属性的定义和用法

input元素内的值为无效值时触发的事件
提交的input元素的值为无效值时，触发oninvalid事件。
代码：

oninvalid="setCustomValidity('用户名不能为空')"

HTML oninvalid 事件属性：语法

HTML5表单验证给前端开发带来许多便利，但是默认的提示不友好。我们可以通过setCustomValidity方法来自定义提示信息，更准确的提示给用户。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Break易站(breakyizhan.com)</title> </head> <body> <form action="demo-form.php"> 手机号: <input type="text" name="phone" maxlength="11" pattern="^(0|86|17951)?1[0-9]{10}" oninvalid="setCustomValidity('请输入11位手机号');"/> <br> <input type="submit"> </form> </body> </html>

提示：可以修改代码后运行

pattern：属性规定用于验证输入字段的正则表达式。
oninvalid：提交的input元素的值为无效值时（这里是正则验证失败），触发oninvalid事件。oninvalid属于Form 事件。
setCustomValidity()：这个是HTML5内置的JS方法，用来自定义提示信息
maxlength：限定input最大输入长度


  HTML 事件属性

]

本文标题：HTML oninvalid 事件属性 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/html/9942.html