Hướng dẫn validate phone number in html - xác thực số điện thoại trong html

Question

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

3 Các yếu tố của loại

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

4 được sử dụng để cho người dùng nhập và chỉnh sửa số điện thoại. Không giống như

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

5 và

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

6, giá trị đầu vào không được xác thực tự động theo một định dạng cụ thể trước khi biểu mẫu có thể được gửi, bởi vì các định dạng cho các số điện thoại khác nhau rất nhiều trên toàn thế giới.
<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />
4 are used to let the user enter and edit a telephone number. Unlike

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

5 and

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

6, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.

Thử nó

Mặc dù thực tế là các đầu vào của loại

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

4 có chức năng giống hệt với các đầu vào

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

8 tiêu chuẩn, chúng phục vụ các mục đích hữu ích; Rõ ràng nhất trong số này là các trình duyệt di động - đặc biệt là trên điện thoại di động - có thể chọn trình bày một bàn phím tùy chỉnh được tối ưu hóa để nhập số điện thoại. Sử dụng một loại đầu vào cụ thể cho các số điện thoại cũng làm cho việc thêm xác thực và xử lý các số điện thoại thuận tiện hơn.

Lưu ý: Các trình duyệt không hỗ trợ loại

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

4 trở lại là một đầu vào văn bản tiêu chuẩn. Browsers that don't support type

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

4 fall back to being a standard text input.

Giá trị

Thuộc tính

<input id="telNo" name="telNo" type="tel" size="20" />

1 của phần tử

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

3 chứa một chuỗi đại diện cho số điện thoại hoặc là một chuỗi trống (

<input id="telNo" name="telNo" type="tel" size="20" />

2).

Thuộc tính bổ sung

Ngoài các thuộc tính hoạt động trên tất cả các yếu tố

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

3 bất kể loại của chúng, các đầu vào số điện thoại hỗ trợ các thuộc tính sau.

danh sách

Các giá trị của thuộc tính danh sách là

<input id="telNo" name="telNo" type="tel" size="20" />

4 của phần tử

<input id="telNo" name="telNo" type="tel" size="20" />

5 nằm trong cùng một tài liệu.

<input id="telNo" name="telNo" type="tel" size="20" />

5 cung cấp một danh sách các giá trị được xác định trước để đề xuất cho người dùng cho đầu vào này. Bất kỳ giá trị nào trong danh sách không tương thích với

<input id="telNo" name="telNo" type="tel" size="20" />

7 không được bao gồm trong các tùy chọn được đề xuất. Các giá trị được cung cấp là các đề xuất, không phải yêu cầu: Người dùng có thể chọn từ danh sách được xác định trước này hoặc cung cấp một giá trị khác.

Maxlength

Số lượng ký tự tối đa (như các đơn vị mã UTF-16) Người dùng có thể nhập vào trường số điện thoại. Đây phải là một giá trị số nguyên 0 hoặc cao hơn. Nếu không có

<input id="telNo" name="telNo" type="tel" size="20" />

8 được chỉ định hoặc giá trị không hợp lệ được chỉ định, trường số điện thoại không có độ dài tối đa. Giá trị này cũng phải lớn hơn hoặc bằng giá trị của

<input id="telNo" name="telNo" type="tel" size="20" />

9.

Đầu vào sẽ không thành công xác thực ràng buộc nếu độ dài của văn bản nhập vào trường lớn hơn

<input id="telNo" name="telNo" type="tel" size="20" />

8 Đơn vị mã UTF-16 dài.

Độ dài nhỏ nhất

Số lượng ký tự tối thiểu (như các đơn vị mã UTF-16) Người dùng có thể nhập vào trường số điện thoại. Đây phải là một giá trị số nguyên không âm nhỏ hơn hoặc bằng giá trị được chỉ định bởi

<input id="telNo" name="telNo" type="tel" size="20" />

8. Nếu không có

<input id="telNo" name="telNo" type="tel" size="20" />

9 được chỉ định hoặc giá trị không hợp lệ được chỉ định, đầu vào số điện thoại không có độ dài tối thiểu.

Trường số điện thoại sẽ không bị ràng buộc xác thực nếu độ dài của văn bản nhập vào trường ít hơn

<input id="telNo" name="telNo" type="tel" size="20" />

9 Đơn vị mã UTF-16 dài.

họa tiết

Thuộc tính

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

4, khi được chỉ định, là một biểu thức thông thường mà

<input id="telNo" name="telNo" type="tel" size="20" />

1 của đầu vào phải khớp để giá trị vượt qua xác thực ràng buộc. Nó phải là một biểu thức thông thường JavaScript hợp lệ, như được sử dụng bởi loại

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

6 và như được ghi lại trong hướng dẫn của chúng tôi về các biểu thức thông thường; Cờ

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

7 được chỉ định khi biên dịch biểu thức chính quy, để mẫu được coi là một chuỗi các điểm mã Unicode, thay vì ASCII. Không có dấu gạch chéo phía trước nên được chỉ định xung quanh văn bản mẫu.

Nếu mẫu được chỉ định không được chỉ định hoặc không hợp lệ, không có biểu thức chính quy nào được áp dụng và thuộc tính này bị bỏ qua hoàn toàn.

Lưu ý: Sử dụng thuộc tính

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

8 để chỉ định văn bản mà hầu hết các trình duyệt sẽ hiển thị dưới dạng công cụ để giải thích các yêu cầu là gì để phù hợp với mẫu. Bạn cũng nên bao gồm văn bản giải thích khác gần đó. Use the

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

8 attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

Xem xác thực mẫu dưới đây để biết chi tiết và một ví dụ.

người giữ chỗ

Thuộc tính

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

9 là một chuỗi cung cấp một gợi ý ngắn gọn cho người dùng về loại thông tin được mong đợi trong trường. Nó phải là một từ hoặc cụm từ ngắn thể hiện loại dữ liệu dự kiến, thay vì một thông điệp giải thích. Văn bản không được bao gồm trả lại vận chuyển hoặc nguồn cấp dữ liệu.

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần trình bày trình giữ chỗ theo hướng ngược lại, bạn có thể sử dụng các ký tự định dạng thuật toán nhị phân Unicode để ghi đè tính định hướng trong trình giữ chỗ; Xem cách sử dụng các điều khiển Unicode cho văn bản BIDI để biết thêm thông tin.

Lưu ý: Tránh sử dụng thuộc tính

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

9 nếu bạn có thể. Nó không hữu ích về mặt ngữ nghĩa như các cách khác để giải thích biểu mẫu của bạn và có thể gây ra các vấn đề kỹ thuật bất ngờ với nội dung của bạn. Xem nhãn và trình giữ chỗ trong: Phần tử đầu vào (đầu vào hình thức) để biết thêm thông tin. Avoid using the

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

9 attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels and placeholders in : The Input (Form Input) element for more information.

chỉ đọc

Một thuộc tính Boolean, nếu có, có nghĩa là trường này không thể được chỉnh sửa bởi người dùng. Tuy nhiên,

<input id="telNo" name="telNo" type="tel" size="20" />

1 của nó vẫn có thể được thay đổi bằng mã JavaScript trực tiếp đặt thuộc tính

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

2

<input id="telNo" name="telNo" type="tel" size="20" />

1.

Lưu ý: Vì trường chỉ đọc không thể có giá trị,

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

4 không có bất kỳ ảnh hưởng nào đến đầu vào với thuộc tính
<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />
5 cũng được chỉ định. Because a read-only field cannot have a value,

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

4 does not have any effect on inputs with the

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

5 attribute also specified.

kích thước

Thuộc tính

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

6 là một giá trị số cho biết trường đầu vào rộng bao nhiêu ký tự. Giá trị phải là một số lớn hơn 0 và giá trị mặc định là 20. Vì độ rộng của ký tự khác nhau, điều này có thể hoặc không chính xác và không nên dựa vào như vậy; Đầu vào thu được có thể hẹp hơn hoặc rộng hơn số lượng ký tự được chỉ định, tùy thuộc vào các ký tự và phông chữ (cài đặt

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

7 đang sử dụng).

Điều này không đặt giới hạn về số lượng ký tự người dùng có thể nhập vào trường. Nó chỉ chỉ định xấp xỉ số lượng có thể được nhìn thấy tại một thời điểm. Để đặt giới hạn trên về độ dài của dữ liệu đầu vào, hãy sử dụng thuộc tính

<input id="telNo" name="telNo" type="tel" size="20" />

8.

Các thuộc tính không chuẩn

Các thuộc tính không chuẩn sau đây có sẵn cho các trường đầu vào số điện thoại. Theo nguyên tắc chung, bạn nên tránh sử dụng chúng trừ khi nó không thể được giúp đỡ.

tự động chính xác

Phần mở rộng Safari, thuộc tính

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

9 là một chuỗi cho biết có nên kích hoạt hiệu chỉnh tự động trong khi người dùng đang chỉnh sửa trường này hay không. Giá trị được phép là:

<label for="telNo">Phone number: label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />

<datalist id="defaultTels">
  <option value="111-1111-1111">option>
  <option value="122-2222-2222">option>
  <option value="333-3333-3333">option>
  <option value="344-4444-4444">option>
datalist>

0

Bật tự động sửa lỗi chính tả, cũng như xử lý các thay thế văn bản nếu có được cấu hình.

<label for="telNo">Phone number: label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />

<datalist id="defaultTels">
  <option value="111-1111-1111">option>
  <option value="122-2222-2222">option>
  <option value="333-3333-3333">option>
  <option value="344-4444-4444">option>
datalist>

1

Vô hiệu hóa hiệu chỉnh tự động và thay thế văn bản.

Mozactionhint

Phần mở rộng Mozilla, cung cấp một gợi ý về loại hành động nào sẽ được thực hiện nếu người dùng nhấn phím Enter hoặc trả về trong khi chỉnh sửa trường.

Thuộc tính này đã được không dùng nữa: sử dụng thuộc tính toàn cầu

<label for="telNo">Phone number: label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />

<datalist id="defaultTels">
  <option value="111-1111-1111">option>
  <option value="122-2222-2222">option>
  <option value="333-3333-3333">option>
  <option value="344-4444-4444">option>
datalist>

2 thay thế.

Sử dụng đầu vào TEL

Số điện thoại là một loại dữ liệu được thu thập rất phổ biến trên web. Ví dụ, khi tạo bất kỳ loại đăng ký hoặc trang web thương mại điện tử nào, bạn có thể sẽ cần hỏi người dùng cho số điện thoại, cho dù mục đích kinh doanh hoặc cho mục đích liên hệ khẩn cấp. Cho rằng các số điện thoại thường được nhập phổ biến như thế nào, thật không may là một giải pháp "một kích thước phù hợp với tất cả" để xác thực số điện thoại là không thực tế.

May mắn thay, bạn có thể xem xét các yêu cầu của trang web của riêng bạn và tự mình thực hiện một mức độ xác thực phù hợp. Xem xác thực, bên dưới, để biết chi tiết.

Bàn phím tùy chỉnh

Một trong những lợi thế chính của

<label for="telNo">Phone number: label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />

<datalist id="defaultTels">
  <option value="111-1111-1111">option>
  <option value="122-2222-2222">option>
  <option value="333-3333-3333">option>
  <option value="344-4444-4444">option>
datalist>

3 là nó khiến các trình duyệt di động hiển thị bàn phím đặc biệt để nhập số điện thoại. Ví dụ, đây là những gì bàn phím trông như thế nào trên một vài thiết bị.

Một đầu vào tel đơn giản

Ở dạng cơ bản nhất, đầu vào TEL có thể được thực hiện như thế này:

<label for="telNo">Phone number:label>
<input id="telNo" name="telNo" type="tel" />

Không có gì kỳ diệu đang diễn ra ở đây. Khi được gửi đến máy chủ, dữ liệu của đầu vào ở trên sẽ được biểu diễn dưới dạng, ví dụ,

<label for="telNo">Phone number: label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />

<datalist id="defaultTels">
  <option value="111-1111-1111">option>
  <option value="122-2222-2222">option>
  <option value="333-3333-3333">option>
  <option value="344-4444-4444">option>
datalist>

4.

Người giữ chỗ

Đôi khi, thật hữu ích khi cung cấp một gợi ý trong bối cảnh về những gì hình thành dữ liệu đầu vào nên lấy. Điều này có thể đặc biệt quan trọng nếu thiết kế trang không cung cấp nhãn mô tả cho mỗi

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

3. Đây là nơi giữ chỗ đến. Một trình giữ chỗ là một giá trị thể hiện hình thức mà

<input id="telNo" name="telNo" type="tel" size="20" />

1 nên lấy bằng cách trình bày một ví dụ về giá trị hợp lệ, được hiển thị bên trong hộp chỉnh sửa khi phần tử

<input id="telNo" name="telNo" type="tel" size="20" />

1 là

<input id="telNo" name="telNo" type="tel" size="20" />

2. Khi dữ liệu được nhập vào hộp, người giữ chỗ sẽ biến mất; Nếu hộp được làm trống, người giữ chỗ sẽ xuất hiện trở lại.placeholders come in. A placeholder is a value that demonstrates the form the

<input id="telNo" name="telNo" type="tel" size="20" />

1 should take by presenting an example of a valid value, which is displayed inside the edit box when the element's

<input id="telNo" name="telNo" type="tel" size="20" />

1 is

<input id="telNo" name="telNo" type="tel" size="20" />

2. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.

Ở đây, chúng tôi có đầu vào

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

4 với trình giữ chỗ

<form>
  <div>
    <label for="telNo">Enter a telephone number (required): label>
    <input id="telNo" name="telNo" type="tel" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

0. Lưu ý cách người giữ chỗ biến mất và xuất hiện lại khi bạn thao tác nội dung của trường chỉnh sửa.

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

Kiểm soát kích thước đầu vào

Bạn có thể kiểm soát không chỉ độ dài vật lý của hộp đầu vào, mà cả độ dài tối thiểu và tối đa cho phép cho chính văn bản đầu vào.

Kích thước phần tử đầu vào vật lý

Kích thước vật lý của hộp đầu vào có thể được kiểm soát bằng thuộc tính

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

6. Với nó, bạn có thể chỉ định số lượng ký tự mà hộp đầu vào có thể hiển thị tại một thời điểm. Trong ví dụ này, ví dụ, hộp chỉnh sửa

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

4 rộng 20 ký tự:

<input id="telNo" name="telNo" type="tel" size="20" />

Độ dài giá trị phần tử

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

6 tách biệt với giới hạn độ dài trên số điện thoại đã nhập. Bạn có thể chỉ định độ dài tối thiểu, tính theo ký tự, cho số điện thoại đã nhập bằng thuộc tính

<input id="telNo" name="telNo" type="tel" size="20" />

9; Tương tự, sử dụng

<input id="telNo" name="telNo" type="tel" size="20" />

8 để đặt độ dài tối đa của số điện thoại đã nhập.

Ví dụ dưới đây tạo ra một hộp nhập số điện thoại rộng 20 ký tự, yêu cầu nội dung không ngắn hơn 9 ký tự và không quá 14 ký tự.

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

Lưu ý: Các thuộc tính trên không ảnh hưởng đến xác thực - Đầu vào của ví dụ trên sẽ được tính là không hợp lệ nếu độ dài của giá trị nhỏ hơn 9 ký tự hoặc hơn 14. Hầu hết các trình duyệt thậm chí sẽ không cho phép bạn nhập giá trị trên độ dài tối đa. The above attributes do affect Validation — the above example's inputs will count as invalid if the length of the value is less than 9 characters, or more than 14. Most browser won't even let you enter a value over the max length.

Cung cấp các tùy chọn mặc định

Cung cấp một mặc định bằng cách sử dụng thuộc tính giá trị

Như mọi khi, bạn có thể cung cấp giá trị mặc định cho hộp đầu vào

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

4 bằng cách đặt thuộc tính

<input id="telNo" name="telNo" type="tel" size="20" />

1 của nó:

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

Cung cấp các giá trị đề xuất

Đưa nó thêm một bước nữa, bạn có thể cung cấp một danh sách các giá trị số điện thoại mặc định mà người dùng có thể chọn. Để làm điều này, hãy sử dụng thuộc tính

<form>
  <div>
    <label for="telNo">Enter a telephone number (required): label>
    <input id="telNo" name="telNo" type="tel" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

8. Điều này không giới hạn người dùng đối với các tùy chọn đó, nhưng cho phép họ chọn số điện thoại thường được sử dụng nhanh hơn. Điều này cũng cung cấp gợi ý cho

<form>
  <div>
    <label for="telNo">Enter a telephone number (required): label>
    <input id="telNo" name="telNo" type="tel" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

9. Thuộc tính

<form>
  <div>
    <label for="telNo">Enter a telephone number (required): label>
    <input id="telNo" name="telNo" type="tel" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

8 chỉ định ID của phần tử

<input id="telNo" name="telNo" type="tel" size="20" />

5, từ đó chứa một phần tử

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}

2 cho mỗi giá trị được đề xuất; Mỗi ________ 73's

<input id="telNo" name="telNo" type="tel" size="20" />

1 là giá trị được đề xuất tương ứng cho hộp nhập số điện thoại.

<label for="telNo">Phone number: label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />

<datalist id="defaultTels">
  <option value="111-1111-1111">option>
  <option value="122-2222-2222">option>
  <option value="333-3333-3333">option>
  <option value="344-4444-4444">option>
datalist>

Với phần tử

<input id="telNo" name="telNo" type="tel" size="20" />

5 và các ____722 của nó, trình duyệt sẽ cung cấp các giá trị được chỉ định làm giá trị tiềm năng cho số điện thoại; Đây thường được trình bày dưới dạng menu bật lên hoặc thả xuống có chứa các đề xuất. Mặc dù trải nghiệm người dùng cụ thể có thể thay đổi từ trình duyệt này sang trình duyệt khác, nhưng thường nhấp vào hộp Chỉnh sửa trình bày một bản thả xuống các số điện thoại được đề xuất. Sau đó, như các loại người dùng, danh sách được điều chỉnh để chỉ hiển thị các giá trị phù hợp được lọc. Mỗi ký tự được gõ thu hẹp danh sách cho đến khi người dùng thực hiện lựa chọn hoặc nhập giá trị tùy chỉnh.

Đây là một ảnh chụp màn hình về những gì có thể trông như thế nào:

Thẩm định

Như chúng tôi đã chạm vào trước đây, rất khó để cung cấp giải pháp xác thực phía máy khách một kích cỡ phù hợp với số điện thoại. Vậy chúng ta có thể làm gì? Hãy xem xét một số tùy chọn.

Cảnh báo: Xác thực biểu mẫu HTML không phải là một sự thay thế cho các tập lệnh phía máy chủ đảm bảo dữ liệu đã nhập ở định dạng thích hợp trước khi được phép vào cơ sở dữ liệu. Thật dễ dàng để ai đó thực hiện các điều chỉnh cho HTML cho phép họ bỏ qua việc xác thực hoặc loại bỏ nó hoàn toàn. Ai đó cũng có thể bỏ qua hoàn toàn HTML của bạn và gửi dữ liệu trực tiếp đến máy chủ của bạn. Nếu mã phía máy chủ của bạn không xác thực dữ liệu mà nó nhận được, thảm họa có thể tấn công khi dữ liệu được định dạng không đúng (hoặc dữ liệu quá lớn, là loại sai, và vv) được nhập vào cơ sở dữ liệu của bạn. HTML form validation is not a substitute for server-side scripts that ensure the entered data is in the proper format before it is allowed into the database. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.

Yêu cầu số điện thoại

Bạn có thể làm cho nó để một đầu vào trống không hợp lệ và sẽ không được gửi đến máy chủ bằng thuộc tính

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

4. Ví dụ: chúng ta hãy sử dụng HTML này:

<form>
  <div>
    <label for="telNo">Enter a telephone number (required): label>
    <input id="telNo" name="telNo" type="tel" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Và hãy bao gồm các CSS sau để làm nổi bật các mục hợp lệ với dấu kiểm và các mục không hợp lệ với chữ thập:

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}

Đầu ra trông như thế này:

Xác thực mẫu

Nếu bạn muốn hạn chế thêm các số đã nhập để chúng cũng phải tuân thủ một mẫu cụ thể, bạn có thể sử dụng thuộc tính

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

4, lấy giá trị của nó một biểu thức chính quy được vào các giá trị phải khớp.

Trong ví dụ này, chúng tôi sẽ sử dụng cùng một CSS như trước đây, nhưng HTML của chúng tôi được thay đổi để trông như thế này:

<form>
  <div>
    <label for="telNo">
      Enter a telephone number (in the form xxx-xxx-xxxx):
    label>
    <input
      id="telNo"
      name="telNo"
      type="tel"
      required
      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}

Lưu ý cách giá trị đã nhập được báo cáo là không hợp lệ trừ khi mẫu xxx-xxx-xxxx mẫu được khớp; Chẳng hạn, 41-323-421 sẽ không được chấp nhận. 800 mdn-rocks sẽ không. Tuy nhiên, 865-555-6502 sẽ được chấp nhận. Mẫu cụ thể này rõ ràng chỉ hữu ích cho một số địa phương nhất định - trong một ứng dụng thực sự, bạn có thể phải thay đổi mẫu được sử dụng tùy thuộc vào địa phương của người dùng.

Ví dụ

Trong ví dụ này, chúng tôi trình bày một giao diện đơn giản với phần tử

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}

9 cho phép người dùng chọn quốc gia nào họ đang ở và một tập hợp các phần tử

<label for="telNo">Phone number: label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />

<datalist id="defaultTels">
  <option value="111-1111-1111">option>
  <option value="122-2222-2222">option>
  <option value="333-3333-3333">option>
  <option value="344-4444-4444">option>
datalist>

3 để cho phép họ nhập từng phần của số điện thoại của họ; Không có lý do tại sao bạn không thể có nhiều đầu vào

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

4.

Mỗi đầu vào có một thuộc tính

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

9 để hiển thị một gợi ý cho người dùng đã nhìn thấy về những gì cần nhập vào nó, một

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

4 để thực thi một số lượng ký tự cụ thể cho phần mong muốn và thuộc tính

<form>
  <div>
    <label for="telNo">
      Enter a telephone number (in the form xxx-xxx-xxxx):
    label>
    <input
      id="telNo"
      name="telNo"
      type="tel"
      required
      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

4 để chứa một gợi ý được đọc để sàng lọc người dùng Trình đọc sàng lọc người dùng về những gì để nhập vào nó.

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

0

JavaScript tương đối đơn giản - nó chứa một trình xử lý sự kiện

<form>
  <div>
    <label for="telNo">
      Enter a telephone number (in the form xxx-xxx-xxxx):
    label>
    <input
      id="telNo"
      name="telNo"
      type="tel"
      required
      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

5 rằng, khi giá trị

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}

9 được thay đổi, cập nhật phần tử

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

4,

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

9 và

<form>
  <div>
    <label for="telNo">
      Enter a telephone number (in the form xxx-xxx-xxxx):
    label>
    <input
      id="telNo"
      name="telNo"
      type="tel"
      required
      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

4 của phần tử trong quốc gia/lãnh thổ đó.

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

1

Ví dụ trông như thế này:

Đây là một ý tưởng thú vị, cho thấy một giải pháp tiềm năng cho vấn đề xử lý các số điện thoại quốc tế. Bạn sẽ phải mở rộng ví dụ tất nhiên để cung cấp mô hình chính xác cho mọi quốc gia, điều này sẽ rất nhiều công việc và vẫn không có sự đảm bảo nào về việc người dùng sẽ nhập chính xác số của họ.

Nó làm cho bạn tự hỏi liệu nó có đáng để gặp tất cả sự cố này ở phía máy khách hay không, khi bạn có thể để người dùng nhập số của họ theo bất kỳ định dạng nào họ muốn ở phía máy khách và sau đó xác nhận và vệ sinh nó trên máy chủ. Nhưng sự lựa chọn này là của bạn để thực hiện.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}

Thông số kỹ thuật

Sự chỉ rõ
HTML Tiêu chuẩn # Điện thoại-State- (Type = Tel) # telephone-state-(type=tel)

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Làm cách nào để xác thực định dạng số điện thoại?

Số điện thoại kiểu EPP Sử dụng định dạng + ccc .nnnnnnnnn x eeeee, trong đó c là mã quốc gia 1 chữ số 3 chữ số, n có giá trị lên đến 14 chữ số và E là phần mở rộng (tùy chọn). Dấu hiệu cộng hàng đầu và dấu chấm theo mã quốc gia là bắt buộc. Nhân vật theo nghĩa đen chỉ được yêu cầu nếu một phần mở rộng được cung cấp.+ CCC . NNNNNNNNNN x EEEE , where C is the 1–3 digit country code, N is up to 14 digits, and E is the (optional) extension. The leading plus sign and the dot following the country code are required. The literal “x” character is required only if an extension is provided.

Làm cách nào để xác thực một số điện thoại di động?

Tiêu chí xác thực số điện thoại di động: Chữ số đầu tiên phải chứa số từ 6 đến 9. 9 chữ số còn lại có thể chứa bất kỳ số nào từ 0 đến 9. Số điện thoại di động có thể có 11 chữ số bằng cách bao gồm 0 khi bắt đầu.Số điện thoại di động có thể là 12 chữ số cũng bằng cách bao gồm 91 khi bắt đầu.The first digit should contain numbers between 6 to 9. The rest 9 digit can contain any number between 0 to 9. The mobile number can have 11 digits also by including 0 at the starting. The mobile number can be of 12 digits also by including 91 at the starting.

Làm thế nào để bạn xác nhận dữ liệu trong HTML?

Cách thiết lập xác thực với chức năng HTML5..

Làm các trường bắt buộc bằng cách sử dụng yêu cầu ..

Hạn chế độ dài của dữ liệu: Minlength, Maxlength: Đối với dữ liệu văn bản.....

Hạn chế loại dữ liệu bằng loại:

Chỉ định các mẫu dữ liệu bằng cách sử dụng mẫu:.

Làm cách nào để xác thực số điện thoại di động 10 chữ số?

Để xác thực các số mười chữ số, chúng ta phải sử dụng một số mã, được mô tả như sau:..

đây.form = fb.tập đoàn({.

Mobilenumber: ['', [Trình xác nhận.Yêu cầu, xác thực.mẫu ("^((\\+91-?) | 0)? [0-9] {10} $")]].

programming html Pattern HTML Input type=tel

Hướng dẫn validate phone number in html - xác thực số điện thoại trong html

Thử nó

Giá trị

Thuộc tính bổ sung

danh sách

Maxlength

Độ dài nhỏ nhất

họa tiết

người giữ chỗ

chỉ đọc

kích thước

Các thuộc tính không chuẩn

tự động chính xác

Mozactionhint

Sử dụng đầu vào TEL

Bàn phím tùy chỉnh

Một đầu vào tel đơn giản

Người giữ chỗ

Kiểm soát kích thước đầu vào

Kích thước phần tử đầu vào vật lý

Độ dài giá trị phần tử

Cung cấp các tùy chọn mặc định

Cung cấp một mặc định bằng cách sử dụng thuộc tính giá trị

Cung cấp các giá trị đề xuất

Thẩm định

Yêu cầu số điện thoại

Xác thực mẫu

Ví dụ

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

Làm cách nào để xác thực định dạng số điện thoại?

Làm cách nào để xác thực một số điện thoại di động?

Làm thế nào để bạn xác nhận dữ liệu trong HTML?

Làm cách nào để xác thực số điện thoại di động 10 chữ số?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội