原文链接: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 下添加获得用户输入时运行的脚本:
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:
(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="" />