html表单验证自定义错误提示

原文链接：html表单验证自定义错误提示
引言
通常情况下，我们在进行表单验证时（比如提交登录注册信息），为了安全考虑以及进一步保证表单信息填写的正确性，会再服务端验证之前，在前端页面先做一次验证。但是浏览器默认的表单填写错误信息并不是我们所期望的，因此需要自定义错误信息。

表单如下：

<input id="username" name="username" type="text" placeholder="用户名" maxlength="10"
pattern="^[a-zA-Z][a-zA-Z0-9_]{0,}" required>
<input type="submit" value="注册">

默认的表单提示
情况1
当用户名为空时，浏览器提示如下图：

html表单验证自定义错误提示
此时 input 的 validationMessage 和 validity 打印出来是：

validationMessage: ‘请填写此字段。’
patternMismatch: false
valid: false
valueMissing: true

这种情况我们一般不做修改；

情况2
当用户名填写 123 不符合预设正则表达式时，浏览器提示如下图：

html表单验证自定义错误提示

此时 input 的 validationMessage 和 validity 打印出来是：

validationMessage: ‘请与所请求的格式保持一致。’
patternMismatch: true
valid: false
valueMissing: false

但我们往往想按照自己的意愿向用户提示的更精准一些，这时就需要自定义错误提示了；

情况3
当用户名填写符合预设正则表达式时：
此时 input 的 validationMessage 和 validity 打印出来是：

validationMessage: ‘’
patternMismatch: false
valid: true
valueMissing: false

直接跳转，也不需做处理。

自定义的表单提示
在 username input 下添加获得用户输入时运行的脚本：

oninput="checkOnInput(this, 'custom tip')"

function checkOnInput(input, tip) {
input.setCustomValidity(tip);
}
情况1
当用户名为空时，浏览器提示如下图：

此时 inpu t的 validationMessage 和 validity 打印出来是：

validationMessage: ‘custom tip’
patternMismatch: false
valid: false
valueMissing: true

这种情况我们一般不做修改；

情况2
当用户名填写 123 不符合预设正则表达式时，浏览器提示如下图：

此时 input 的 validationMessage 和 validity 打印出来是：

validationMessage: ‘custom tip’
patternMismatch: true
valid: false
valueMissing: false

但我们往往想按照自己的意愿向用户提示的更精准一些，这时就需要自定义错误提示了；

情况3
当用户名填写符合预设正则表达式时，浏览器提示如下图：（与情况2相同）

此时 input 的 validationMessage 和 validity 打印出来是：

validationMessage: ‘’
patternMismatch: false
valid: false
valueMissing: false

不跳转，所以上述处理不正确。

自定义的表单提示，提示内容为空
在 username input 下添加获得用户输入时运行的脚本：

oninput="checkOnInput(this, '')"

function checkOnInput(input, tip) {
input.setCustomValidity(tip);
}
经过测试，与默认的表单提示情况相同。

综上所述
自定义错误提示，当输入框填写为空或者正确时，打印的数据和默认提示有明显区别，与我们所期望的也相差很大。
因此设置自定义错误提示可以根据 patternMismatch 的值判断，是情况1、3时，默认处理；是情况2时，自定义处理。

处理办法
在 username input 下添加获得用户输入时运行的脚本：

oninput="checkOnInput(this, 'custom tip')"
js方法：
function checkOnInput(input, tip) {
if (input.validity.patternMismatch === true) {
input.setCustomValidity(tip);
} else {
input.setCustomValidity('');
}
}
这样就可以只在输入错误的时候按照我们的意愿来提示啦。

原文：https://blog.csdn.net/lvlei0801/article/details/82747198

附例：

JS：

HTML:

html表单验证自定义错误提示

相关推荐