HTML5 pattern属性手机号校验失败及自定义无效提示样式问题咨询

一、pattern属性校验不通过问题 #

问题原因 #

HTML5的pattern属性无需包裹正则表达式的前后/分隔符，你当前代码中的/被识别为正则匹配规则的一部分，而输入的格式化手机号开头为(，无法匹配正则开头的/，因此始终触发格式错误。

修复代码 #

<input type="text" id="Phone" name="Phone" maxlength="14" value="" class="required" required="" data-msg-required="Please enter the Telephone number." pattern="^\(*\+*[1-9]{0,3}\)*-*[1-9]{0,3}[-. /]*\(*[2-9]\d{2}\)*[-. /]*\d{3}[-. /]*\d{4} *e*x*t*\.* *\d{0,4}$" placeholder="(XXX) XXX-XXXX">
<input type="submit">

仅需删除原pattern属性值前后的/即可，原有正则逻辑可以正常匹配(xxx) xxx-xxxx格式的手机号。

二、自定义错误样式问题 #

问题原因 #

原有JS代码的元素选择器和实际页面元素属性不匹配：你的input元素name属性为Phone、id属性为Phone，代码中使用的input[name='cellphone']、getElementById("cellphone")无法匹配到对应元素，事件绑定不生效，默认弹窗无法被阻止。

修复代码 #

JS代码

var cell = document.querySelector("input[name='Phone']");
// 监听invalid事件阻止默认提示，添加错误类
cell.addEventListener('invalid', function (e) {  
    e.preventDefault();    
    $(cell).parents(".fui-form").addClass("fui-form-error");
}, true);
// 可选：用户输入时自动清除错误状态
cell.addEventListener('input', function () {
    $(cell).parents(".fui-form").removeClass("fui-form-error");
})

配套CSS（实现红色边框）

.fui-form-error #Phone {
    border: 1px solid #ff0000;
    outline: none;
}

内容的提问来源于stack exchange，提问作者Regual