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属性，如果浏览器语言和提示信息语言一致的话

转载于:https://www.cnblogs.com/lbnnbs/p/11005957.html