Trang chủ » Thiết kế web » Giới thiệu Xác thực ràng buộc HTML5

    Giới thiệu Xác thực ràng buộc HTML5

    Các trang web và ứng dụng tương tác không thể được tưởng tượng mà không có các hình thức cho phép chúng tôi kết nối với người dùng của chúng tôi, và để lấy dữ liệu chúng tôi cần để đảm bảo giao dịch suôn sẻ với họ. Chúng tôi cần đầu vào người dùng hợp lệ, tuy nhiên chúng ta cần có được nó theo cách không nản lòng người dùng của chúng tôi quá nhiều.

    Mặc dù chúng tôi có thể cải thiện khả năng sử dụng các biểu mẫu của mình bằng các mẫu thiết kế UX được chọn thông minh, HTML5 cũng có một cơ chế riêng để xác thực ràng buộc cho phép chúng tôi bắt lỗi đầu vào ngay ở mặt trước.

    Trong bài đăng này, chúng tôi sẽ tập trung vào xác nhận ràng buộc do trình duyệt cung cấp, và xem xét làm thế nào các nhà phát triển frontend có thể bảo mật đầu vào người dùng hợp lệ bằng HTML5.

    Tại sao chúng ta cần xác thực đầu vào Front-end

    Xác nhận đầu vào có hai mục tiêu chính. Nội dung chúng tôi nhận được cần phải là:

    1. Hữu ích

    Chúng ta cần dữ liệu có thể sử dụng chúng ta có thể làm việc với. Chúng ta cần phải làm cho mọi người đi vào dữ liệu thực tế ở định dạng đúng. Chẳng hạn, không ai còn sống ngày nay được sinh ra cách đây 200 năm. Nhận dữ liệu như thế này thoạt nghe có vẻ buồn cười, nhưng về lâu dài nó gây khó chịu và làm cho cơ sở dữ liệu của chúng tôi có dữ liệu vô dụng.

    2. Bảo mật

    Khi đề cập đến bảo mật, điều này có nghĩa là chúng ta cần phải ngăn chặn nội dung độc hại - dù cố tình hay vô tình.

    Hữu ích (nhận dữ liệu hợp lý) có thể đạt được chỉ ở phía khách hàng, nhóm phụ trợ không thể giúp quá nhiều với điều này. Để đạt được Bảo vệ, nhà phát triển phía trước và phụ trợ cần phải làm việc cùng nhau.

    Nếu các nhà phát triển lối vào xác nhận hợp lệ đầu vào ở phía máy khách, thì nhóm phụ trợ sẽ phải đối phó với các lỗ hổng ít hơn nhiều. Hacking (một trang web) thường đòi hỏi nộp thêm dữ liệu, hoặc là dữ liệu sai định dạng. Các nhà phát triển có thể chống lại các lỗ hổng bảo mật như thế này, chiến đấu thành công từ phía trước.

    Ví dụ, hướng dẫn bảo mật PHP này khuyên bạn nên kiểm tra mọi thứ chúng ta có thể ở phía máy khách. Họ nhấn mạnh tầm quan trọng của xác nhận đầu vào frontend bằng cách đưa ra nhiều ví dụ, chẳng hạn như:

    "Xác thực đầu vào hoạt động tốt nhất với các giá trị cực kỳ hạn chế, ví dụ: khi một thứ gì đó phải là số nguyên hoặc chuỗi ký tự chữ và số hoặc URL HTTP."

    Trong xác nhận đầu vào frontend, công việc của chúng tôi là áp đặt các ràng buộc hợp lý về đầu vào của người dùng. Tính năng xác thực ràng buộc của HTML5 cung cấp cho chúng tôi các phương tiện để làm như vậy.

    Xác thực ràng buộc HTML5

    Trước HTML5, các nhà phát triển lối vào đã bị giới hạn ở xác thực đầu vào của người dùng bằng JavaScript, đó là một quá trình tẻ nhạt và dễ bị lỗi. Để cải thiện xác thực biểu mẫu phía máy khách, HTML5 đã giới thiệu xác nhận ràng buộc thuật toán chạy trong các trình duyệt hiện đại và kiểm tra tính hợp lệ của đầu vào đã gửi.

    Để thực hiện đánh giá, thuật toán sử dụng thuộc tính liên quan đến xác nhận của các yếu tố đầu vào, nhu la ,

    Các tối đa thuộc tính không trả lại thông báo lỗi, nhưng trình duyệt đơn giản là không cho phép người dùng nhập nhiều hơn số ký tự được chỉ định. Đó là lý do tại sao nó rất quan trọng để thông báo cho người dùng về các ràng buộc, nếu không họ sẽ không hiểu tại sao họ không thể tiếp tục gõ.

    4. mẫu để xác nhận Regex

    Các mẫu thuộc tính cho phép chúng ta sử dụng biểu thức chính quy trong quá trình xác nhận đầu vào của chúng tôi. Một biểu thức chính quy là một bộ ký tự được xác định trước tạo thành một mô hình nhất định. Chúng ta có thể sử dụng nó để tìm kiếm các chuỗi theo mẫu hoặc để thực thi một định dạng nhất định được xác định bởi mẫu.

    Với mẫu thuộc tính chúng ta có thể thực hiện sau - buộc người dùng gửi dữ liệu đầu vào của họ ở định dạng phù hợp với biểu thức chính quy định.

    Các mẫu thuộc tính có nhiều trường hợp sử dụng, nhưng nó có thể đặc biệt hữu ích khi chúng ta muốn xác thực trường mật khẩu.

    Ví dụ dưới đây yêu cầu người dùng nhập mật khẩu dài tối thiểu 8 ký tự và chứa ít nhất một chữ cái và một số (nguồn của biểu thức chính tôi đã sử dụng).

     

    Một vài điều nữa

    Trong bài viết này, chúng tôi đã xem xét cách sử dụng xác thực mẫu do trình duyệt cung cấp được cung cấp bởi thuật toán xác thực ràng buộc gốc của HTML5. Để tạo tập lệnh xác thực tùy chỉnh của chúng tôi, chúng tôi cần sử dụng API xác thực ràng buộc có thể là bước tiếp theo trong việc tinh chỉnh các kỹ năng xác thực mẫu.

    Các hình thức HTML5 có thể truy cập bằng các công nghệ hỗ trợ, vì vậy chúng tôi không nhất thiết phải sử dụng aria-yêu cầu Thuộc tính ARIA để đánh dấu các trường đầu vào cần thiết cho trình đọc màn hình. Tuy nhiên, vẫn có thể hữu ích để thêm hỗ trợ trợ năng cho các trình duyệt cũ hơn. Cũng có thể từ chối xác nhận ràng buộc bằng cách thêm xác nhận thuộc tính boolean cho

    thành phần.