Ví dụ về xác thực biểu mẫu cơ bản trong JavaScript là gì?
JavaScript là một trợ giúp lớn khi chấp nhận dữ liệu ở dạng công khai trên các trang web; Show
Trong hướng dẫn này, chúng ta sẽ xây dựng một biểu mẫu đăng nhập đơn giản và thêm xác thực giao diện người dùng bằng vanilla JavaScript. Mục tiêu bao trùm là cung cấp phản hồi hữu ích cho người dùng cuối và đảm bảo dữ liệu được gửi là những gì chúng tôi muốn thông tin Hướng dẫn này được viết để người mới bắt đầu có thể làm theo—nhưng một số kiến thức JavaScript cơ bản và hiểu biết về các nguyên tắc viết mã chắc chắn sẽ hữu ích Bản trình diễn trực tiếp về Xác thực biểu mẫu JavaScript của chúng tôiKiểm tra bút bên dưới để kiểm tra xác thực biểu mẫu JavaScript của chúng tôi—phân nhánh nó, vui lòng sao chép các đoạn mã và làm theo hướng dẫn để xem nó được tạo như thế nào Tại sao JavaScript hiện đại hoạt động đủ tốtNhờ những tiến bộ gần đây trong JavaScript, chúng tôi có thể tự tin sử dụng JavaScript hiện đại để thực hiện xác thực biểu mẫu mà không có bất kỳ sự phụ thuộc nào Tuy nhiên, một số khung ngoài tự nhiên đơn giản hóa chiến lược xác thực. Chúng tôi sẽ không sử dụng bất kỳ phụ thuộc nào cho hướng dẫn này để làm cho mọi thứ hoạt động Điều đáng nói là trong nhiều tình huống, HTML5 có các xác thực tích hợp sẵn có thể hoạt động đủ tốt cho các dự án của bạn. Chúng có thể hữu ích nếu bạn không quan tâm đến việc tạo xác thực tùy chỉnh của mình hoặc không có thêm thời gian. Hướng dẫn này sẽ tận dụng lộ trình tùy chỉnh để làm cho trải nghiệm có thương hiệu hơn
1. Thêm đánh dấuBắt đầu với HTML, tôi đã tạo một biểu mẫu tạo tài khoản đơn giản được hiển thị ở giữa trang. Biểu mẫu có bốn trường đầu vào (tên người dùng, email, mật khẩu, xác nhận mật khẩu) và nút gửi đầu vào Trong đánh dấu, chúng tôi sẽ thêm một số yếu tố bổ sung để cung cấp phản hồi xác thực cho người dùng cuối. Chúng bao gồm một số biểu tượng SVG (có nguồn gốc từ heroons. com và một số thẻ 512 trống. Đây là những hướng dẫn có thể thực hiện được nếu một trường không vượt qua xác thực 1
|