Thẻ đầu vào html

Với HTML5 chúng ta có một số kiểu đầu vào để xác thực những giá trị mà người dùng đưa vào, không cần tự viết javascript để kiểm tra, chỉ đơn giản là khai báo mấy cái thuộc tính, trường hợp phức tạp hơn, chúng ta có thể liên tưởng trong đó

Luôn nhớ xác thực ở phía máy khách không có nghĩa là không cần phải xác thực ở máy chủ

  Tìm hiểu xác thực biểu mẫu với HTML5

  Định dạng chuẩn và quy ước viết mã trong HTML5

Một số bắt buộc phổ biến

Use input type_

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
9. bắt buộc là giá trị email 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
0. bắt buộc là giá trị url

Use other attribute

Thẻ đầu vào html
Thẻ đầu vào html

Thuộc tínhKiểu đầu vào hỗ trợGiải thích
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
1văn bản, tìm kiếm, url, điện thoại, email, mật khẩu phải khớp với giá trị biểu thức chính quy
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
0phạm vi, số, ngày, tháng, tuần, ngày giờ, datetime-local, thời giangiá trị phải lớn hơn hoặc bằng giá trị 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
0
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
2phạm vi, số, ngày

Ví dụ

<form>
  <label for="name">Enter username (upper and lowercase letters): </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+">
  <button>Submit</button>
</form>

Quá trình xác thực dữ liệu

Quá trình này sẽ thông qua bộ API xác thực, nó có thể là trên cả biểu mẫu hoặc trên từng phần tử trong biểu mẫu. Được thực hiện bằng một trong các cách sau bằng cách gọi 

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
9 của các phần tử đầu vào, chọn, nút, vùng văn bản. Nó sẽ chỉ xác thực dữ liệu trên phần tử đó thôi. Nó thường được thực hiện bởi trình duyệt, sau đó chúng ta sử dụng bộ chọn của CSS là 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
10 và 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
11 để định dạng cuộc gọi 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
9 hoặc 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
13 trên biểu mẫu Khi biểu mẫu được gửi bằng cách nhấp vào '
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
14 hoặc nhấn enter

Lưu ý

  • Nếu đặt novalidate trên thẻ
    <label for="FS">Select a file smaller than 75 kB : </label>
    <input type="file" id="FS">
    15, chúng tôi sẽ bỏ qua hết việc xác thực
  • Khi gọi 
    <label for="FS">Select a file smaller than 75 kB : </label>
    <input type="file" id="FS">
    16 trên biểu mẫu, không kích hoạt xác thực, phương thức này sẽ gửi toàn bộ dữ liệu của biểu mẫu lên máy chủ mặc dù nó có hoặc không có điều kiện điều kiện. To call the event 
    <label for="FS">Select a file smaller than 75 kB : </label>
    <input type="file" id="FS">
    17 của nút gửi

Can thiệp vào quá trình xác nhận hợp lệ bằng bộ API xác thực

Ý tưởng chính là bắt một sự kiện bất kỳ trên phần tử nào như 

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
18, sau đó kích hoạt một đoạn javascript để xác thực, sau đó sử dụng phương thức 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
19 để đặt kết quả xác thực. if is String null mean is ok, but reverse is error, this string string will be going to display as a error error for user

Giới hạn kích thước tệp khi tải lên

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">

Sử dụng javascript để đọc tệp được chọn, 

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
20, so sánh kích thước này rồi trả về kết quả cho trình duyệt

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
1

Hook cái phương thức này vào trong sự kiện mong muốn

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
2

Hiển thị xác thực

Sử dụng 

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
21 và 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
22 để trỏ đến bất kỳ phần tử nào thuộc tính 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
4 hoặc không

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
8

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
10 và 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
11 trên các yếu tố bị/không bị lỗi

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
1

Để thay đổi nội dung câu thông báo, hãy sử dụng 

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
26 trên các phần tử.
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
27, 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
28, 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
29, 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
80, 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
81, 
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS">
82