Nếu tất cả các kiểm tra này vượt qua, hệ thống cho phép người dùng đăng nhập. Nếu bất kỳ kiểm tra nào không thành công, hệ thống sẽ hiển thị thông báo lỗi và không cho phép người dùng đăng nhập
Các bước xác thực biểu mẫu đăng nhập Javascript
Dưới đây là các bước liên quan đến việc thực hiện xác thực biểu mẫu đăng nhập bằng JavaScript
- Tạo biểu mẫu đăng nhập với các trường nhập cho địa chỉ email và mật khẩu
- Liên kết biểu mẫu với một hàm JavaScript sẽ xử lý xác thực. Điều này có thể được thực hiện bằng cách sử dụng thuộc tính sự kiện onsubmit của thành phần biểu mẫu hoặc bằng cách sử dụng trình lắng nghe sự kiện để lắng nghe sự kiện gửi
- Trong chức năng xác thực, lấy các giá trị của trường nhập email và mật khẩu bằng hàm getElementById()
- Xác định biểu thức chính quy để kiểm tra định dạng của địa chỉ email và sử dụng hàm match() để kiểm tra xem địa chỉ email có khớp với biểu thức chính quy hay không
- Kiểm tra xem trường nhập mật khẩu có trống không
- Kiểm tra xem email và mật khẩu có khớp với email và mật khẩu được lưu trữ trong cơ sở dữ liệu cho người dùng không. Điều này thường liên quan đến việc gửi yêu cầu đến máy chủ để kiểm tra thông tin đăng nhập của người dùng
- Nếu tất cả các kiểm tra vượt qua, hãy cho phép người dùng đăng nhập bằng cách gửi biểu mẫu. Nếu bất kỳ kiểm tra nào không thành công, hãy hiển thị thông báo lỗi và ngăn không cho gửi biểu mẫu
Ví dụ xác thực biểu mẫu đăng nhập Javascript
function validateForm() { // Get the value of the input field with id="email" var email = document.getElementById("email").value; // Get the value of the input field with id="password" var password = document.getElementById("password").value; // Regular expression to check if the email is in the correct format var emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // Check if the email is empty if (email == "") { alert("Email field must be filled out"); return false; } // Check if the email is in the correct format if (!email.match(emailRegex)) { alert("Please enter a valid email address"); return false; } // Check if the password is empty if (password == "") { alert("Password field must be filled out"); return false; } // Send a request to the server to check the user's credentials // If the credentials are correct, return true to submit the form // If the credentials are incorrect, display an error message and return false to prevent the form from being submitted return true; }Tải xuống mã nguồn hoàn chỉnh của xác thực biểu mẫu đăng nhập.
Chức năng này thực hiện như sau
- Nó nhận các giá trị của trường nhập email và mật khẩu bằng cách sử dụng hàm getElementById()
- Nó định nghĩa một biểu thức chính quy để kiểm tra định dạng của email
- Nó kiểm tra xem các trường nhập email hoặc mật khẩu có trống không
- Nó gửi yêu cầu đến máy chủ để kiểm tra thông tin đăng nhập của người dùng
- Nếu tất cả các kiểm tra vượt qua, nó sẽ trả về true để gửi biểu mẫu. Nếu bất kỳ kiểm tra nào không thành công, nó sẽ hiển thị thông báo lỗi và trả về false để ngăn biểu mẫu được gửi
Kiểm tra cách thiết kế form đăng ký đăng nhập bằng HTML & CSS
Các bước xác thực trường mật khẩu Javascript
- Dưới đây là một số tính năng mà bạn có thể muốn đưa vào chức năng xác thực mật khẩu JavaScript
- Chiều dài tối thiểu. Yêu cầu mật khẩu phải có ít nhất một độ dài nhất định (e. g. 8 ký tự) giúp đảm bảo rằng mật khẩu đủ mạnh để chống lại các cuộc tấn công vũ phu
- Yêu cầu về độ phức tạp. Yêu cầu mật khẩu chứa hỗn hợp các loại ký tự khác nhau (e. g. chữ hoa, chữ thường, số và ký tự đặc biệt) có thể khiến người khác khó đoán mật khẩu hơn
- xác nhận mật khẩu. Yêu cầu người dùng nhập mật khẩu lần thứ hai (trong một trường riêng) có thể giúp đảm bảo rằng người dùng đã nhập đúng mật khẩu của họ
- máy đo cường độ. Máy đo độ mạnh mật khẩu là một chỉ báo trực quan cho người dùng biết mật khẩu của họ mạnh như thế nào dựa trên các tiêu chí nhất định (e. g. độ dài, độ phức tạp). Điều này có thể giúp người dùng chọn một mật khẩu mạnh hơn
- Biểu hiện thông thường. Biểu thức chính quy là một chuỗi các ký tự xác định mẫu tìm kiếm. Bạn có thể sử dụng biểu thức chính quy để kiểm tra xem mật khẩu có đáp ứng các tiêu chí nhất định không (e. g. dài ít nhất 8 ký tự, với ít nhất một chữ hoa, một chữ thường và một số)
Dưới đây là ví dụ về chức năng xác thực mật khẩu sử dụng JavaScript bao gồm một số tính năng này
function validatePassword() { // Get the value of the input field with id="password" var password = document.getElementById("password").value; // Get the value of the input field with id="passwordConfirm" var passwordConfirm = document.getElementById("passwordConfirm").value; // Regular expression to check if the password is strong enough var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/; // Check if the password is empty if (password == "") { alert("Password field must be filled out"); return false; } // Check if the password is strong enough if (!password.match(passwordRegex)) { alert("Password must be at least 8 characters long and contain at least one lowercase letter, one uppercase letter, and one number"); return false; } // Check if the password confirmation is empty if (passwordConfirm == "") { alert("Password confirmation field must be filled out"); return false; } // Check if the passwords match if (password != passwordConfirm) { alert("Passwords do not match"); return false; } // If all checks pass, return true return true; }Tải xuống mã nguồn hoàn chỉnh của xác thực biểu mẫu đăng nhập.
Chức năng này thực hiện như sau
- Nó nhận các giá trị của trường nhập mật khẩu và xác nhận mật khẩu bằng cách sử dụng hàm getElementById()
- Nó định nghĩa một biểu thức chính quy để kiểm tra độ mạnh của mật khẩu
- Nó kiểm tra xem các trường nhập mật khẩu hoặc xác nhận mật khẩu có trống không
- Nó kiểm tra xem mật khẩu có khớp không
- Nếu tất cả các kiểm tra vượt qua, nó sẽ trả về true. Nếu bất kỳ kiểm tra nào không thành công, nó sẽ hiển thị thông báo lỗi và trả về false
Các bước xác thực email Javascript
Dưới đây là các bước bạn có thể làm theo để xác thực địa chỉ email trong JavaScript
- Tạo một biểu thức chính quy khớp với mẫu của một địa chỉ email hợp lệ. Biểu thức chính quy này nên kiểm tra những điều sau đây
- Địa chỉ email phải chứa một hoặc nhiều ký tự trước ký hiệu @
- Địa chỉ email phải chứa một ký hiệu @
- Địa chỉ email phải chứa một hoặc nhiều ký tự sau ký hiệu @ nhưng trước ký tự. biểu tượng
- Địa chỉ email phải chứa một. biểu tượng, theo sau là một hoặc nhiều ký tự
- Tạo một hàm lấy địa chỉ email làm đối số và sử dụng biểu thức chính quy để kiểm tra xem địa chỉ email có đúng định dạng không
- Gọi hàm và chuyển nó đến địa chỉ email bạn muốn xác thực
- Nếu hàm trả về true thì địa chỉ email đúng định dạng. Nếu nó trả về false, địa chỉ email không đúng định dạng
Đây là một ví dụ về cách bạn có thể triển khai điều này trong JavaScript.
function validateEmail(email) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); } var email = "test@example.com"; if (validateEmail(email)) { console.log("Valid email address"); } else { console.log("Invalid email address"); }
Tải xuống mã nguồn hoàn chỉnh của xác thực biểu mẫu đăng nhập.
Lưu ý rằng biểu thức chính quy này không phải là một giải pháp hoàn hảo và có thể không bắt được tất cả các địa chỉ email không hợp lệ. Cũng cần lưu ý rằng việc xác thực địa chỉ email ở phía máy khách bằng JavaScript không đảm bảo rằng địa chỉ email đó thực sự hợp lệ. Bạn cũng nên xác thực địa chỉ email ở phía máy chủ