Home >Web Front-end >JS Tutorial >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.
<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>
// 选择输入框 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);
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'); } }
.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!