HTML 模式不适用于格式化的电话号码

Question

according to my regex test this should pass the pattern test... https://regex101.com/r/dT3vQC/1

However something is going wrong. Please help me understand this.

 function formatPhone(obj) { var numbers = obj.value.replace(/\\D/g, ''), char = { 0: '(', 3: ') ', 6: ' - ' }; obj.value = ''; for (var i = 0; i < numbers.length; i++) { obj.value += (char[i] || '') + numbers[i]; } console.log(obj.value) }

 <form> <input required type="tel" name="phone" id="phone" placeholder="(xxx) xxx - xxxx" onblur="formatPhone(this);" onkeypress="formatPhone(this);" pattern="\\([0-9]{3}\\)\\s[0-9]{3}\\s-\\s[0-9]{4}" oninvalid="this.setCustomValidity('please enter 10 digit number')"> <button>check</button> </form>

Answer 1

Basically I was confused about the api for setCustomValidity if you set it to an empty string that means it isn't going to fire. If that value is set it will fire on every submit. Here is a working example.

 function formatPhone(phoneInput) { var numbers = phoneInput.value.replace(/\\D/g, ''), char = { 0: '(', 3: ') ', 6: ' - ' }; phoneInput.value = ''; for (var i = 0; i < numbers.length; i++) { phoneInput.value += (char[i] || '') + numbers[i]; } } function checkPhone(phoneInput) { var formatted = phoneInput.value.replace(/\\D/g, ''); if (formatted.length !== 10) { phoneInput.setCustomValidity('please enter 10 digit number') } else { phoneInput.setCustomValidity(""); // be sure to leave this empty! } }

 <form> <input required type="tel" name="phone" id="phone" placeholder="(xxx) xxx - xxxx" oninput="checkPhone(this);" onblur="formatPhone(this);" onkeypress="formatPhone(this);"> <button>check</button> </form>