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 />