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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值