Xác thực biểu mẫu được thực hiện như thế nào trong javascript?
Làm việc với các biểu mẫu là công việc hàng ngày của hầu hết mọi nhà phát triển web. Bất kể bạn tạo trang web nào, nó sẽ sử dụng biểu mẫu. Xác thực dữ liệu biểu mẫu ở phía máy khách là một tính năng tuyệt vời khi nói đến trải nghiệm người dùng. Trong hướng dẫn này, chúng ta sẽ tạo một xác thực biểu mẫu đơn giản bằng javascript Show Mặc dù xác thực biểu mẫu phía máy khách mang lại trải nghiệm người dùng tốt, nhưng nó có thể bị lừa và bỏ qua rất dễ dàng. Để ngăn việc sử dụng có mục đích xấu, bạn phải luôn xác thực dữ liệu biểu mẫu ở phía máy chủ Video hướng dẫnThay vào đó, nếu bạn muốn xem video chi tiết từng bước, bạn có thể xem video tôi đã thực hiện về dự án này trên Kênh Youtube của tôi HTMLHãy bắt đầu với đánh dấu HTML. Chúng tôi sẽ có một div 5, mà chúng tôi sẽ sử dụng để định vị và tạo kiểu cho biểu mẫu của chúng tôi. Bên trong đó, không ngạc nhiên, chúng tôi sẽ tạo một 6, chúng tôi cũng đặt một 7 cho nó và đặt 8 thành 9 vì chúng tôi không thực sự muốn gửi biểu mẫu nàyChúng tôi sẽ tạo bốn trường nhập, cho tên người dùng, email, mật khẩu và xác nhận mật khẩu. Đối với mục đích tạo kiểu và kiểm soát, chúng tôi sẽ bọc các thẻ 0 này thành các thẻ 1 với lớp 2. Mỗi điều khiển đầu vào này sẽ chứa một 3, một 0 và một 1 với lớp 6. Mọi đầu vào phải có thuộc tính id và name. Nhãn phải có thuộc tính 7 phù hợp với thuộc tính tên của thẻ đầu vào tương ứng. Đối với loại đầu vào, chúng tôi sẽ sử dụng 8 cho tên người dùng và email và sử dụng 9 cho mật khẩu và xác nhận mật khẩu. Div với lớp 6 sẽ giữ các thông báo lỗi cho trường nhập liệu cụ thể. Bây giờ nó sẽ trống, chúng tôi sẽ sửa đổi nó từ javascriptCuối cùng, chúng ta phải thêm một nút để "gửi" biểu mẫu của mình. Trong ví dụ này, chúng tôi sẽ không thực sự gửi biểu mẫu mà chỉ mô phỏng nó. Đối với nút gửi, tôi sẽ sử dụng một nút có loại 61 7Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Đó là đánh dấu HTML mà chúng tôi cần cho biểu mẫu của mình. Hãy tạo kiểu cho nó một chút với CSS CSSChúng tôi sẽ cung cấp một thiết kế rộng rãi, sạch sẽ đơn giản cho hướng dẫn này. Tôi sẽ đặt một dải màu tuyến tính làm nền và tôi sẽ sử dụng phông chữ google tùy chỉnh mà bạn có thể cài đặt từ đây
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Chúng tôi sẽ cố định chiều rộng cho biểu mẫu của mình và căn giữa nó với các lề, tôi cũng sẽ tạo cho nó một lề trên để di chuyển nó xuống một chút theo chiều dọc. Để có thêm không gian, chúng tôi áp dụng 20px phần đệm. Chúng tôi sẽ đặt kích thước phông chữ cố định, màu nền sáng và cũng đặt bán kính đường viền để có các góc tròn
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Đối với tiêu đề biểu mẫu, chúng tôi sẽ sử dụng màu văn bản tối và căn giữa nó theo chiều ngang bằng cách sử dụng 62. Nút gửi phải nổi bật vì vậy chúng tôi sẽ sử dụng màu nền xanh và màu văn bản màu trắng. Chúng tôi cũng xóa các đường viền mặc định của trình duyệt và cung cấp cho nó một chút bán kính đường viền. Chúng tôi sẽ cung cấp cho nó một khoảng cách nhỏ với phần đệm và lề, đồng thời làm cho nó có chiều rộng đầy đủ bằng cách áp dụng 100% chiều rộng 6Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Để có các đầu vào xếp chồng lên nhau, chúng tôi sẽ sử dụng flexbox. Để làm điều đó, chúng tôi sẽ đặt 63 và 64. Đối với đầu vào, chúng tôi sẽ đặt đường viền màu xám, với bán kính đường viền nhỏ. Chúng tôi sẽ đặt thuộc tính hiển thị thành 65 và làm cho chúng có chiều rộng đầy đủ bằng cách áp dụng chiều rộng 100%. Chúng tôi cũng sẽ đặt một phần đệm nhỏ, vì vậy nó sẽ rộng rãi hơn. Tôi cũng sẽ xóa đường viền khi đầu vào được lấy nét bằng cách đặt 66 6Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Chúng tôi sẽ sử dụng hai lớp ("thành công" và "lỗi") để đưa ra phản hồi trực quan cho người dùng về việc giá trị của đầu vào có hợp lệ hay không. Chúng tôi sẽ áp dụng các lớp này từ javascript cho div điều khiển đầu vào chứa trường đầu vào cụ thể. Khi có lớp thành công, chúng tôi sẽ đặt màu viền xanh lục, nếu không, nếu có lỗi, chúng tôi sẽ sử dụng màu viền đỏ thay thế. Đối với lỗi div, chúng tôi sẽ sử dụng cỡ chữ nhỏ hơn và màu đỏ để hiển thị thông báo lỗi 7Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Hãy thực hiện xác thực trong javascript tiếp theo JavascriptĐiều đầu tiên chúng ta phải làm là lưu các tham chiếu cho biểu mẫu và các trường nhập liệu. Vì chúng tôi có id cho mọi đầu vào và biểu mẫu, chúng tôi có thể dễ dàng thực hiện bằng cách sử dụng ________ 167 9Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Để ngăn biểu mẫu tự động gửi, chúng tôi phải đính kèm và trình xử lý sự kiện vào sự kiện 61 của biểu mẫu của chúng tôi. Trong hàm xử lý sự kiện này, chúng ta phải gọi hàm 69 để ngăn biểu mẫu gửi tự động. Thay vì gửi, chúng tôi sẽ gọi hàm 60, hàm này sẽ xác thực các đầu vào và nếu muốn, chúng tôi có thể gửi biểu mẫu vào đó sau mỗi lần kiểm tra, nhưng chúng tôi sẽ không làm điều đó trong hướng dẫn này. Chúng tôi sẽ sớm tạo 60 này 4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Chúng ta cũng sẽ tạo hai hàm trợ giúp. 62, 63. Chúng tôi sẽ sử dụng các chức năng trợ giúp này để đặt lỗi hoặc trạng thái thành công của các điều khiển đầu vào. Hãy bắt đầu với setError một. Nó nhận hai tham số. 64 và 65. Phần tử sẽ là phần tử đầu vào nằm trong điều khiển đầu vào cụ thể. Vì vậy, trước tiên chúng ta phải lấy div cha kiểm soát đầu vào. Chúng tôi sẽ lưu nó vào biến 66 và lấy div điều khiển đầu vào bằng cách sử dụng thuộc tính 67 của phần tử đầu vào. Tiếp theo, chúng ta phải thu thập lỗi div và lưu nó vào một biến. Chúng ta có thể làm điều đó bằng cách truy vấn điều khiển đầu vào với lớp lỗi. Bây giờ, chúng ta phải đặt nội dung của div lỗi thành thông báo mà chúng ta nhận được trong các tham số và xóa lớp 68 khỏi điều khiển đầu vào (nếu có) và thêm lớp lỗi. 2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Phương thức setSuccess sẽ thực sự giống nhau. Sự khác biệt đầu tiên là nó sẽ không nhận được thông báo dưới dạng tham số. Chúng ta phải xóa hiển thị lỗi bằng cách đặt văn bản bên trong của nó thành một chuỗi trống. Cuối cùng, chúng ta phải đảo ngược ứng dụng lớp. Chúng ta sẽ thêm lớp 68 vào inputControl và xóa lớp 6 (nếu có) 5Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Chúng tôi sẽ tạo một chức năng trợ giúp cuối cùng để xác thực email. Đây là một bước tùy chọn, nếu bạn không muốn sử dụng các biểu thức thông thường, vui lòng chỉ đặt loại đầu vào của trường email thành 71. Hàm 72 sẽ lấy một chuỗi làm tham số và sử dụng biểu thức chính quy có vẻ kỳ lạ này để kiểm tra xem đó có phải là một email hợp lệ hay không. Chúng tôi sẽ sử dụng hàm 73 để kiểm tra chuỗi dựa trên biểu thức chính quy. Chúng tôi cũng sẽ chuyển đổi email thành một chuỗi và viết thường 0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Bây giờ chúng ta nên tạo hàm 60 của trình xác thực. Đầu tiên chúng ta sẽ lấy giá trị của tất cả các trường đầu vào. Chúng ta có thể làm điều đó bằng cách lấy giá trị của thuộc tính giá trị của tham chiếu trường đầu vào. Chúng ta sẽ gọi hàm 75 để xóa các khoảng trống ở cuối (nếu có) ở đầu và cuối của các giá trị. Sau đó, chúng ta có thể bắt đầu xác thực đầu vào. Chúng tôi sẽ sử dụng câu lệnh 76 để thực hiện xác thực. Đối với tên người dùng, chúng tôi sẽ kiểm tra xem nó có trống hay không, bằng cách so sánh giá trị với một chuỗi trống. Nếu nó trống, chúng tôi sẽ gọi hàm 62 và cung cấp phần tử tên người dùng cho nó, kèm theo thông báo lỗi của chúng tôi. Nếu không, chúng ta sẽ gọi phương thức 63 với phần tử tên người dùng. Bây giờ chúng ta phải làm điều này cho các trường đầu vào khác, nhưng cách tiếp cận sẽ giống nhau. 1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Đối với email, chúng tôi sẽ kiểm tra xem nó có được cung cấp hay không và đặt lỗi nếu nó trống. Nếu nó không trống, chúng tôi sẽ kiểm tra xem đó có phải là địa chỉ email hợp lệ hay không và nếu không, chúng tôi sẽ đặt lỗi, nếu không, chúng tôi sẽ đặt thành công cho trường 2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Đối với mật khẩu, chúng tôi sẽ kiểm tra xem nó có trống hay không và nếu nó không trống, chúng tôi sẽ kiểm tra xem nó có dài hơn 7 ký tự không. Nếu không, hãy đặt lỗi, nếu không, chúng tôi sẽ đặt thành công 3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Đối với xác nhận mật khẩu, chúng tôi sẽ kiểm tra xem nó có trống không và chúng tôi cũng nên kiểm tra xem giá trị của xác nhận mật khẩu có bằng giá trị của mật khẩu không 4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Bây giờ chúng tôi đã xác thực mọi đầu vào, nếu muốn, chúng tôi có thể gửi biểu mẫu của mình ngay bây giờ đến một điểm cuối cụ thể Làm tốt lắm, bây giờ bạn đã có Javascript xác thực biểu mẫu đang hoạt động. Xin lưu ý rằng bạn luôn phải xác thực các đầu vào biểu mẫu ở phía máy chủ vì có thể dễ dàng bỏ qua xác thực phía máy khách. Có nhiều phương thức và thư viện xác thực biểu mẫu nâng cao hơn mà chúng tôi sử dụng trong phát triển web hiện đại, nhưng dự án này là một cách thực sự tốt để bắt đầu và tìm hiểu các nguyên tắc cơ bản Nơi bạn có thể học hỏi thêm từ tôi?Tôi tạo nội dung giáo dục về phát triển web trên một số nền tảng, vui lòng 👀 kiểm tra chúng Tôi cũng tạo một bản tin nơi tôi chia sẻ nội dung giáo dục của tuần hoặc 2 tuần mà tôi đã tạo. Không có bò💩 chỉ có nội dung giáo dục Xác thực biểu mẫu hoạt động như thế nào?Xác thực biểu mẫu là một “ quy trình kỹ thuật trong đó biểu mẫu web kiểm tra xem thông tin do người dùng cung cấp có chính xác hay không . ” Biểu mẫu sẽ cảnh báo người dùng rằng họ đã nhầm lẫn và cần sửa một số thứ để tiếp tục hoặc biểu mẫu sẽ được xác thực và người dùng sẽ có thể tiếp tục quá trình đăng ký của họ.
Xác thực trong JavaScript là gì?Xác thực là một phương pháp để xác thực người dùng. JavaScript cung cấp phương tiện để xác thực biểu mẫu ở phía máy khách để quá trình xử lý dữ liệu sẽ nhanh hơn so với xác thực phía máy chủ. Nó được ưa thích bởi hầu hết các nhà phát triển web
Ba loại xác thực biểu mẫu là gì?Các kỹ thuật xác thực đầu vào được chia thành ba loại. . Xác thực phía máy chủ. Với xác thực phía máy chủ, tất cả thông tin biểu mẫu do người dùng nhập sẽ được gửi đến máy chủ để được xác thực khi gửi biểu mẫu. . Xác thực phía máy khách. . Xác thực thời gian thực Xác thực biểu mẫu xảy ra ở đâu?Xác thực biểu mẫu 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. |