Hướng dẫn can we validate in html? - chúng ta có thể xác nhận trong html không?

Các biểu mẫu có mặt khắp nơi trong các ứng dụng web. Một số ứng dụng sử dụng biểu mẫu để thu thập dữ liệu để đăng ký người dùng và cung cấp địa chỉ email. Những người khác sử dụng chúng để thực hiện các giao dịch trực tuyến để tạo điều kiện cho trải nghiệm mua sắm.

Bạn có thể sử dụng một số hình thức web để đăng ký cho vay xe mới, trong khi bạn sẽ sử dụng những người khác để đặt pizza cho bữa tối. Vì vậy, điều quan trọng là dữ liệu được thu thập từ các hình thức đó được làm sạch, được định dạng chính xác và không có bất kỳ mã độc hại nào. Quá trình này được gọi là xác thực mẫu.

Chúng tôi cần xác thực biểu mẫu bất cứ lúc nào chúng tôi chấp nhận đầu vào của người dùng. Chúng tôi phải đảm bảo rằng dữ liệu được nhập ở định dạng chính xác, nằm trong phạm vi dữ liệu hợp lệ (chẳng hạn như các trường ngày) và không chứa mã độc có thể dẫn đến tiêm SQL. Dữ liệu bị lỗi hoặc thiếu cũng có thể khiến API ném lỗi.

Các loại xác nhận biểu mẫu khác nhau là gì?

Xác thực hình thức có thể xảy ra ở phía máy khách và phía máy chủ.

Xác thực phía máy khách xảy ra bằng cách sử dụng các thuộc tính HTML5 và JavaScript phía máy khách.

Bạn có thể nhận thấy rằng trong một số biểu mẫu, ngay khi bạn nhập địa chỉ email không hợp lệ, biểu mẫu gây ra lỗi "Vui lòng nhập email hợp lệ". Loại xác nhận ngay lập tức này thường được thực hiện thông qua JavaScript phía máy khách.

Trong các trường hợp khác, bạn có thể nhận thấy rằng khi bạn điền vào biểu mẫu và nhập chi tiết như thẻ tín dụng, nó có thể hiển thị màn hình tải và sau đó hiển thị lỗi "Thẻ tín dụng này không hợp lệ".

Tại đây, biểu mẫu đã thực hiện một cuộc gọi đến mã phía máy chủ của nó và trả về lỗi xác thực sau khi thực hiện kiểm tra thẻ tín dụng bổ sung. Trường hợp xác thực này trong đó một cuộc gọi phía máy chủ được thực hiện được gọi là xác thực phía máy chủ.

Dữ liệu nào nên được xác thực?

Cần xác thực biểu mẫu bất cứ lúc nào bạn chấp nhận dữ liệu từ người dùng. Điều này có thể bao gồm:

1. Xác thực định dạng của các trường như địa chỉ email, số điện thoại, mã zip, tên, mật khẩu.
2. Xác thực các trường bắt buộc
3. Kiểm tra loại dữ liệu như chuỗi so với số cho các trường như số An sinh xã hội.
4. Đảm bảo rằng giá trị được nhập là một giá trị hợp lệ như quốc gia, ngày, v.v.

Cách thiết lập xác thực phía máy khách

Về phía khách hàng, xác thực có thể được thực hiện theo hai cách:

1. Sử dụng chức năng HTML5
2. Sử dụng JavaScript

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

HTML5 cung cấp một loạt các thuộc tính để giúp xác nhận dữ liệu. Dưới đây là một số trường hợp xác nhận phổ biến:

• Làm các trường bắt buộc bằng cách sử dụng required
• Hạn chế độ dài của dữ liệu:
  • minlength, maxlength: Đối với dữ liệu văn bản
  • min và

    
       First Name* 
      
      Submit
    
      
        Please enter First Name
      
    
    

    0 cho giá trị tối đa của loại num
• Hạn chế loại dữ liệu bằng cách sử dụng

  
     First Name* 
    
    Submit
  
    
      Please enter First Name
    
  
  

  1:

  • 
       First Name* 
      
      Submit
    
      
        Please enter First Name
      
    
    

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

  
     First Name* 
    
    Submit
  
    
      Please enter First Name
    
  
  

  3:
  • Chỉ định một mẫu regex mà dữ liệu biểu mẫu đã nhập cần phải khớp với nhau

Khi giá trị đầu vào khớp với xác thực HTML5 ở trên, nó sẽ được gán một psuedo-class

   First Name* 
  
  Submit

  
    Please enter First Name
  

   First Name* 
  
  Submit

  
    Please enter First Name
  

Hãy thử một ví dụ:

 First Name: 

 Last Name: 

Submit

Liên kết đến JSfiddle

Ở đây chúng tôi có hai trường bắt buộc - họ và họ. Hãy thử ví dụ này trong JSfidle. Nếu bạn bỏ qua một trong hai trường này và nhấn gửi, bạn sẽ nhận được tin nhắn, "Vui lòng điền vào trường này". Đây là xác thực bằng cách sử dụng HTML5 được xây dựng.

Cách thiết lập xác thực bằng cách sử dụng JavaScript

Khi thực hiện xác thực biểu mẫu, có một vài điều cần xem xét:

1. Những gì được định nghĩa là dữ liệu "hợp lệ"? Điều này giúp bạn trả lời các câu hỏi về định dạng, độ dài, trường bắt buộc và loại dữ liệu.
2. Điều gì xảy ra khi dữ liệu không hợp lệ được nhập? Điều này sẽ giúp bạn xác định trải nghiệm người dùng về xác thực - có nên hiển thị thông báo lỗi nội tuyến hay ở đầu biểu mẫu, nên có thông báo lỗi nào, nếu biểu mẫu được tổng hợp, nên có phân tích để theo dõi định dạng không hợp lệ Dữ liệu? Và như thế.

Bạn có thể thực hiện xác thực JavaScript theo hai cách:

1. Xác thực nội tuyến bằng cách sử dụng JavaScript
2. API xác thực ràng buộc HTML5

Xác thực nội tuyến bằng cách sử dụng JavaScript

   First Name* 
  
  Submit

  
    Please enter First Name
  

const submit = document.getElementById("submit");

submit.addEventListener("click", validate);

function validate(e) {
  e.preventDefault();

  const firstNameField = document.getElementById("firstname");
  let valid = true;

  if (!firstNameField.value) {
    const nameError = document.getElementById("nameError");
    nameError.classList.add("visible");
    firstNameField.classList.add("invalid");
    nameError.setAttribute("aria-hidden", false);
    nameError.setAttribute("aria-invalid", true);
  }
  return valid;
}

#nameError {
  display: none;
  font-size: 0.8em;
}

#nameError.visible {
  display: block;
}

input.invalid {
  border-color: red;
}

Liên kết đến JSfiddle

Ở đây chúng tôi có hai trường bắt buộc - họ và họ. Hãy thử ví dụ này trong JSfidle. Nếu bạn bỏ qua một trong hai trường này và nhấn gửi, bạn sẽ nhận được tin nhắn, "Vui lòng điền vào trường này". Đây là xác thực bằng cách sử dụng HTML5 được xây dựng.

Cách thiết lập xác thực bằng cách sử dụng JavaScript

API xác thực ràng buộc HTML5

Trong ví dụ này, chúng tôi kiểm tra các trường bắt buộc bằng JavaScript. Nếu không có trường bắt buộc, chúng tôi sử dụng CSS để hiển thị thông báo lỗi.

Nhãn ARIA được sửa đổi phù hợp để báo hiệu một lỗi. Bằng cách sử dụng CSS để hiển thị / ẩn lỗi, chúng tôi đang giảm số lượng thao tác DOM mà chúng tôi cần thực hiện. Thông báo lỗi được cung cấp trong bối cảnh do đó làm cho trải nghiệm người dùng trực quan.

1. 
      First Name* 
     
     Submit
   
     
       Please enter First Name
     
   
   

   8

2. 
      First Name* 
     
     Submit
   
     
       Please enter First Name
     
   
   

   9

3. const submit = document.getElementById("submit");
   
   submit.addEventListener("click", validate);
   
   function validate(e) {
     e.preventDefault();
   
     const firstNameField = document.getElementById("firstname");
     let valid = true;
   
     if (!firstNameField.value) {
       const nameError = document.getElementById("nameError");
       nameError.classList.add("visible");
       firstNameField.classList.add("invalid");
       nameError.setAttribute("aria-hidden", false);
       nameError.setAttribute("aria-invalid", true);
     }
     return valid;
   }
   

   0

Các thuộc tính required và

   First Name* 
  
  Submit

  
    Please enter First Name
  

1. const submit = document.getElementById("submit");
   
   submit.addEventListener("click", validate);
   
   function validate(e) {
     e.preventDefault();
   
     const firstNameField = document.getElementById("firstname");
     let valid = true;
   
     if (!firstNameField.value) {
       const nameError = document.getElementById("nameError");
       nameError.classList.add("visible");
       firstNameField.classList.add("invalid");
       nameError.setAttribute("aria-hidden", false);
       nameError.setAttribute("aria-invalid", true);
     }
     return valid;
   }
   

   1

2. const submit = document.getElementById("submit");
   
   submit.addEventListener("click", validate);
   
   function validate(e) {
     e.preventDefault();
   
     const firstNameField = document.getElementById("firstname");
     let valid = true;
   
     if (!firstNameField.value) {
       const nameError = document.getElementById("nameError");
       nameError.classList.add("visible");
       firstNameField.classList.add("invalid");
       nameError.setAttribute("aria-hidden", false);
       nameError.setAttribute("aria-invalid", true);
     }
     return valid;
   }
   

   2

3. const submit = document.getElementById("submit");
   
   submit.addEventListener("click", validate);
   
   function validate(e) {
     e.preventDefault();
   
     const firstNameField = document.getElementById("firstname");
     let valid = true;
   
     if (!firstNameField.value) {
       const nameError = document.getElementById("nameError");
       nameError.classList.add("visible");
       firstNameField.classList.add("invalid");
       nameError.setAttribute("aria-hidden", false);
       nameError.setAttribute("aria-invalid", true);
     }
     return valid;
   }
   

   3

Trong ví dụ này, chúng tôi sẽ xác thực bằng cách sử dụng các phương thức Inbuilt HTML5 như required và

const submit = document.getElementById("submit");

submit.addEventListener("click", validate);

function validate(e) {
  e.preventDefault();

  const firstNameField = document.getElementById("firstname");
  let valid = true;

  if (!firstNameField.value) {
    const nameError = document.getElementById("nameError");
    nameError.classList.add("visible");
    firstNameField.classList.add("invalid");
    nameError.setAttribute("aria-hidden", false);
    nameError.setAttribute("aria-invalid", true);
  }
  return valid;
}

 First Name: 

Submit

const nameField = document.querySelector("input");

nameField.addEventListener("input", () => {
  nameField.setCustomValidity("");
  nameField.checkValidity();
  console.log(nameField.checkValidity());
});

nameField.addEventListener("invalid", () => {
  nameField.setCustomValidity("Please fill in your First Name.");
});

Liên kết đến JSfiddle

Đừng quên xác thực phía máy chủ

Xác thực phía khách hàng không phải là kiểm tra xác thực duy nhất bạn nên làm. Bạn cũng phải xác thực dữ liệu nhận được từ máy khách của bạn trên mã phía máy chủ để đảm bảo rằng dữ liệu phù hợp với những gì bạn mong đợi.

Bạn cũng có thể sử dụng xác thực phía máy chủ để thực hiện xác minh logic kinh doanh không nên sống ở phía máy khách.

Hình thành các thực tiễn tốt nhất

1. Luôn luôn có xác thực phía máy chủ, vì các tác nhân độc hại có thể bỏ qua xác thực phía khách hàng.
2. Cung cấp thông báo lỗi chi tiết trong bối cảnh với trường tạo ra lỗi.
3. Cung cấp một ví dụ về dữ liệu sẽ trông như thế nào trong trường hợp thông báo lỗi, chẳng hạn như - "Email không phù hợp với định dạng -"
4. Tránh sử dụng các trang lỗi duy nhất liên quan đến chuyển hướng. Đây là trải nghiệm người dùng tồi và buộc người dùng phải quay lại trang trước để sửa biểu mẫu và mất bối cảnh.
5. Luôn luôn đánh dấu các trường bắt buộc.

Quan tâm đến nhiều hướng dẫn và bài viết như thế này? Hãy đăng ký để nhận thư mới từ tôi. Hoặc theo dõi tôi trên Twitter