如何在 html 中获取输入字段以确保模式包含特定国家/地区代码，例如 1472，后跟 3 个数字，然后是 4 个数字

Question

I have different sign up pages that load for different countries, and I need the telephone input to be for that specific country, such as on one page it needs to be the country code 1234 followed by any 3 numbers and then any 4 numbers. so I need the pattern for the input in the html form. I am dealing with it on the server side with PHP, but I want to handle it on the client side via the input restriction pattern, as to be more efficient. Im sure its really simple but I cant seem to find a simple solution. thanks for your help

i tried the pattern restriction, i casn get the any 4 number, space, any 3 number, space any 4 numbers. but i could not get the: '1234' specific number, space, any 3 number, space, any 4 numbers.

Answer 1

In this example, the pattern attribute used in the input verifies that the input follows the E.164 standard, the pattern "^+(?:[0-9]?){6,14}[0-9]$ " accepts only strings beginning with + followed by 6-14 numeric characters(optionally separated by spaces) and a numeric character at the end:

<input type="tel" id="phone" name="phone" pattern="^\+(?:[0-9] ?){6,14}[0-9]$" placeholder="+391234567890" oninput="if(this.value.length==3) this.value= this.value + ' '; this.value=this.value.replace(/^(\+39[0-9]{2})([0-9]{4})([0-9]{4})$/,'$1 $2 $3')" value="+39 " minlength="14" maxlength="14" readonly onfocus="this.removeAttribute('readonly')">

The oninput attribute used to format the phone number as the user includes it, in this case to format it as "+39 (XXX) XXXX XXXX" (Italian prefix, my country for simplicity) In addition, the value attribute is set to +39 so that the user cannot delete the international prefix.