input 的 pattern 验证表单

时间:2023-03-09 05:54:30
input 的 pattern 验证表单

pattern 用于定义验证输入正则表达式

pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 password

需要注意的是:input的正则表达式是不需要使用 \ 来转义特殊字符的,这和js里面的正则表达式有所区别,转义了反而会报错

可以使用 title 属性来描述正则表达式,这样在浏览器验证表单是就会按title描述来提示错误消息

使用title虽然会有提示,但提示语前面会附加 “请匹配要求的格式”。如果浏览器是中文,提示语是英文,就会感觉怪怪的

这时我们可以通过setCustomValidity方法来自定义提示信息,更准确的提示给用户,但因为设置了setCustomValidity后如果不手动取消,表单就会一直提示有错误消息而无法提交,所以需要写一段js代码

<script type="text/javascript">
    function vali(obj) {
        if (obj.validity.patternMismatch === true) {
            obj.setCustomValidity($(obj).prop('title'));
        } else {
            obj.setCustomValidity('');
        }
    }
</script>

<input type="text" pattern="[a-zA-Z]+" oninvalid="vali(this);" />

上面这个方法还有一个问题,因为调用vali()函数是在oninvalid里面调用的,而oninvalid是在onsubmit中被浏览器调用的

所以执行vali()函数后submit不会再执行了,这样即使vali()里面调用了obj.setCustomValidity('');清理了错误消息,表单也还是无法提交,还需要点击一次提交按钮

所以,看具体情况,也可以使用oninput代替oninvalid,或者就只使用title属性,如果浏览器语言和提示信息语言一致的话