How to use JavaScript to implement real-time verification of the input box content of a form?

How to use JavaScript to implement real-time verification of the input box content of a form?

In many web applications, forms are the most commonly used interaction method between users and the system. However, the content entered by the user often needs to be validated to ensure the accuracy and completeness of the data. In this article, we will learn how to use JavaScript to implement real-time verification of the input box content of a form, and provide specific code examples.

1. Create form
   First, we need to create a simple form in HTML to demonstrate the real-time verification function. The following is an example of a form containing username, password and email address:

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" required>
  <br>
  
  <label for="password">密码:</label>
  <input type="password" id="password" required>
  <br>
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" required>
</form>

2. Select input boxes and add validation events
   Next, we use JavaScript to select these input boxes and Add real-time validation events to them. By listening to input events or focus loss events, we can check what the user inputs in real time.

// 选择输入框
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const emailInput = document.getElementById('email');

// 添加校验事件
usernameInput.addEventListener('input', validateUsername);
passwordInput.addEventListener('input', validatePassword);
emailInput.addEventListener('input', validateEmail);

3. Writing a verification function
   Next, we need to write a verification function to check the content of the input box. Depending on specific validation rules, we can use regular expressions or other methods to validate user input.

function validateUsername() {
  const regex = /^[a-zA-Z0-9_-]{3,16}$/;
  const value = usernameInput.value;

  if (regex.test(value)) {
    // 校验通过
    usernameInput.classList.remove('invalid');
    usernameInput.classList.add('valid');
  } else {
    // 校验失败
    usernameInput.classList.remove('valid');
    usernameInput.classList.add('invalid');
  }
}

function validatePassword() {
  const regex = /^[a-zA-Z0-9!@#$%^&*]{6,16}$/;
  const value = passwordInput.value;

  if (regex.test(value)) {
    // 校验通过
    passwordInput.classList.remove('invalid');
    passwordInput.classList.add('valid');
  } else {
    // 校验失败
    passwordInput.classList.remove('valid');
    passwordInput.classList.add('invalid');
  }
}

function validateEmail() {
  const regex = /^[^s@]+@[^s@]+.[^s@]+$/;
  const value = emailInput.value;

  if (regex.test(value)) {
    // 校验通过
    emailInput.classList.remove('invalid');
    emailInput.classList.add('valid');
  } else {
    // 校验失败
    emailInput.classList.remove('valid');
    emailInput.classList.add('invalid');
  }
}

4. Stylized verification results
   Finally, we can define the styles of verification passing and verification failure in the CSS file so that users can intuitively see the input box state.

.valid {
  border: 1px solid green;
}

.invalid {
  border: 1px solid red;
}

So far, we have completed the steps of using JavaScript to implement the real-time verification function of the input box content of the form. When the user inputs in the input box, we use the validation function to check the input content and update the style of the input box based on the validation results. This provides users with an immediate feedback that helps them find errors and fix them faster.

Summary
In this article, we learned how to use JavaScript to implement real-time verification of the content of the form's input box. By selecting the input box, adding validation events, writing validation functions, and styling the validation results, we can provide users with an immediate feedback method to help them better perform form input. This is a simple and practical tip that can improve the user experience and the quality of data, and reduce the impact of incorrect operations.

The above is the detailed content of How to use JavaScript to implement real-time verification of the input box content of a form?. For more information, please follow other related articles on the PHP Chinese website!