How does JavaScript implement form verification on the login page?

JavaScript How to implement the form verification function of the login page?

In modern websites, the login page is an important entrance for users to interact with the website. Ensuring the security and reliability of the login page is crucial to the protection of user information. To achieve this, we can use JavaScript to validate the form on the login page. In this article, we will discuss how to use JavaScript to implement form validation for login pages and provide specific code examples.

The form verification of the login page mainly includes the following aspects: user name verification, password verification, form submission, etc. Below we will introduce how to use JavaScript to implement these functions one by one.

Username Verification

In username verification, we need to verify whether the username is empty or in the correct format. First, we can use JavaScript's querySelector method to obtain the element of the username input box and obtain the value entered by the user through its value attribute. We can then use regular expressions to determine whether the format of the username meets the requirements. The following is an example code:

var usernameInput = document.querySelector("#username");
var username = usernameInput.value;

if (username === "") {
   alert("用户名不能为空！");
} else if (!/^[a-zA-Z0-9_]{5,}$/.test(username)) {
   alert("用户名格式不正确！");
}

Password verification

In password verification, we need to verify whether the password is empty and whether the length of the password meets the requirements. Similarly, we can use the querySelector method to obtain the element of the password input box and obtain the password entered by the user through its value attribute. Then, we can use JavaScript's length property to determine whether the password's length meets the requirements. The following is an example code:

var passwordInput = document.querySelector("#password");
var password = passwordInput.value;

if (password === "") {
   alert("密码不能为空！");
} else if (password.length < 6 || password.length > 20) {
   alert("密码长度不符合要求！");
}

Form submission

Before submitting the form, we need to check the validity of the username and password. You can add a click event listener to the submit button of the form to complete the form validation operation in the click event. The following is an example code:

var loginForm = document.querySelector("#login-form");
var submitButton = document.querySelector("#submit-button");

submitButton.addEventListener("click", function(event) {
   event.preventDefault(); // 阻止表单的默认提交行为

   var usernameInput = document.querySelector("#username");
   var passwordInput = document.querySelector("#password");

   var username = usernameInput.value;
   var password = passwordInput.value;

   if (username === "" || password === "") {
      alert("用户名和密码不能为空！");
   } else if (!/^[a-zA-Z0-9_]{5,}$/.test(username)) {
      alert("用户名格式不正确！");
   } else if (password.length < 6 || password.length > 20) {
      alert("密码长度不符合要求！");
   } else {
      loginForm.submit();
   }
});

In the above code, we first use the querySelector method to obtain the elements of the login form and submit button, and then add a click event listener to the submit button. In the click event, we obtain the input values ​​​​of the username and password and perform corresponding verification operations. If the verification passes, the submit method of the form is called to submit; if the verification fails, the corresponding prompt message pops up.

Through the above sample code, we can see how to use JavaScript to implement the form verification function of the login page. Of course, this is just a simple example, and there may be more verification requirements in actual scenarios, such as verification of verification codes. However, by understanding these basic validation principles, we can further expand and improve the form validation capabilities of the login page. I hope this article can be helpful to you, thank you for reading!

The above is the detailed content of How does JavaScript implement form verification on the login page?. For more information, please follow other related articles on the PHP Chinese website!