input | pattern | oninvalid | setCustomValidity | html5原生js表单校验

简介: input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
    <input
            type="text"
            placeholder="账号"
            class="input"
            id="userName"
            pattern="[a-zA-Z][a-zA-Z0-9_]{4,15}"
            oninvalid="setCustomValidity('请输入以字母开头, 由字母数字下划线组成的4-15位账号!')"
            required
          />

若第一次未输入正确, 则会一指弹出报错信息, 永远不会匹配正确

如何解决?

参考: https://www.runoob.com/js/js-validation-api.html

setCustomValidity()
设置 input 元素的 validationMessage 属性,用于自定义错误提示信息的方法。

使用 setCustomValidity 设置了自定义提示后,validity.customError 就会变成 true,checkValidity 总是会返回 false。


解决


添加input事件

οninput=“setCustomValidity(‘’)”

                    <input v-model="registerForm.username" type="text" placeholder="账号" class="input"
                        pattern="[a-zA-Z][a-zA-Z0-9_]{4,15}" oninvalid="setCustomValidity('请输入以字母开头, 由字母数字下划线组成的4-15位账号!')"
                        oninput="setCustomValidity('')" required />

                    <input v-model="registerForm.email" type="email" placeholder="邮箱" class="input"
                        oninvalid="setCustomValidity('请输入正确的邮箱格式!')" oninput="setCustomValidity('')" required />
                    <input v-model="registerForm.password" type="password" placeholder="密码" class="input"
                        pattern="[a-zA-Z0-9_]{5,17}" oninvalid="setCustomValidity('请输入由数字、字母、下划线组成的5-17位密码!')"
                        oninput="setCustomValidity('')" required />
相关文章
|
11天前
|
移动开发 前端开发 JavaScript
纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜
23 6
|
28天前
|
数据安全/隐私保护 UED
HTML表单
HTML表单
26 1
|
3天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
5天前
|
Python
HTML表单
【6月更文挑战第13天】HTML表单。
14 7
|
6天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
13 2
|
7天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
19 3
|
11天前
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
19 7
基于Spring3 MVC实现基于HTML form表单文件上传
|
12天前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
13 1
|
14天前
|
移动开发 前端开发 数据安全/隐私保护
HTML基础-表单元素与属性:深入浅出指南
【6月更文挑战第4天】本文介绍了HTML表单的基础知识,包括`&lt;form&gt;`标签、各种表单元素(如文本输入、密码、单选、复选、下拉菜单和提交按钮)以及相关属性。易错点包括忘记设置`name`属性、不使用`label`、忽视表单验证和不安全的提交方式。建议使用HTML5内置验证属性增强安全性,并使用`POST`方法处理敏感信息。提供的完整注册表单示例展示了这些概念的应用。
|
14天前
|
Python
HTML表单
HTML表单。
7 1