原文链接：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
当用户名为空时，浏览器提示如下图：
此时 input 的 validationMessage 和 validity 打印出来是：
validationMessage: ‘请填写此字段。’
patternMismatch: false
valid: false
valueMissing: true
这种情况我们一般不做修改；
情况2
当用户名填写 123 不符合预设正则表达式时，浏览器提示如下图：
此时 input 的 validationMessage 和 validity 打印出来是：
validationMessage: ‘请与所请求的格式保持一致。’
patternMismatch: true
valid: false
valueMissing: false
但我们往往想按照自己的意愿向用户提示的更精准一些，这时就需要自定义错误提示了；
情况3
当用户名填写符合预设正则表达式时：
此时 input 的 validationMessage 和 validity 打印出来是：
validationMessage: ‘’
patternMismatch: false
valid: true
valueMissing: false
直接跳转，也不需做处理。
自定义的表单提示
在 username input 下添加获得用户输入时运行的脚本：
οninput="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 下添加获得用户输入时运行的脚本：
οninput="checkOnInput(this, '')"
function checkOnInput(input, tip) {
input.setCustomValidity(tip);
}
经过测试，与默认的表单提示情况相同。
综上所述
自定义错误提示，当输入框填写为空或者正确时，打印的数据和默认提示有明显区别，与我们所期望的也相差很大。
因此设置自定义错误提示可以根据 patternMismatch 的值判断，是情况1、3时，默认处理；是情况2时，自定义处理。
处理办法
在 username input 下添加获得用户输入时运行的脚本：
οninput="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：
(function () {
$.extend($.fn.validatebox.defaults.rules, {
length: {
validator: function(value, param){
var len = $.trim(value).length;
return len >= param[0] && len <= param[1]
},
message: '字符长度必须介于{0}和{1}之间。'
}
});
})(jQuery);
HTML:
<input id="testLength" name="testLength" validtype="length[1,20]" required="true" style="width: 150px;" type="text" value="" />
