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
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 = "[email protected]";
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ủ
Làm cách nào để xác thực thông tin đăng nhập trong HTML?
Để tạo xác thực biểu mẫu đăng nhập bằng HTML CSS & JavaScript, hãy làm theo các bước sau. .
Ban đầu, bạn cần tạo hai tệp một HTML (. html) và một tệp CSS khác (. css). .
Và, tạo một tệp CSS có tên style
Cuối cùng, tạo một tệp JavaScript với tên của tập lệnh
Làm cách nào để xác thực mật khẩu và xác nhận mật khẩu trong HTML?
Làm cách nào để xác thực tên người dùng và mật khẩu trong HTML?
Mật khẩu.
Làm cách nào bạn có thể xác thực biểu mẫu đăng nhập của người dùng?
Cách xác thực biểu mẫu đăng nhập bằng React và Formik .
