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