使用 Vanilla JS 实现表单验证（适合初学者）-js教程-PHP中文网

使用 Vanilla JS 实现表单验证（适合初学者）

WBOY

发布： 2024-08-06 00:58:21

原创

412 人浏览过

Implementing Form Validation with Vanilla JS (Beginner-Friendly)

练习：表单验证

客观的

创建一个包含姓名、电子邮件和密码字段的基本表单。实施 JavaScript 验证以确保在提交之前正确填写字段。这是一个简单的代码项目，旨在帮助您开始使用 JS 进行基本表单验证。

要求

HTML 表单：创建一个包含姓名、电子邮件和密码输入的 HTML 表单。
CSS 样式：添加基本样式，使表单看起来干净且用户友好。
JavaScript 验证：实现 JavaScript 来验证表单字段。

分步说明

第 1 步：设置 HTML 结构

创建一个新的 HTML 文件
- 创建一个名为index.html的新文件。

添加 HTML 样板

将基本 HTML 样板添加到您的文件中：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Form Validation</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <form id="registrationForm">
         <h2>Registration Form</h2>
         <div>
             <label for="name">Name:</label>
             <input type="text" id="name" name="name">
             <span id="nameError" class="error"></span>
         </div>
         <div>
             <label for="email">Email:</label>
             <input type="email" id="email" name="email">
             <span id="emailError" class="error"></span>
         </div>
         <div>
             <label for="password">Password:</label>
             <input type="password" id="password" name="password">
             <span id="passwordError" class="error"></span>
         </div>
         <button type="submit">Register</button>
     </form>
     <script src="script.js"></script>
 </body>
 </html>

登录后复制

添加表单元素
- 确保您的表单包含姓名、电子邮件和密码字段，每个字段都有相应的错误消息范围。

第 2 步：添加基本 CSS 样式

创建一个新的 CSS 文件
- 创建一个名为 styles.css 的新文件。

添加基本样式

添加基本样式，使表单看起来干净且用户友好：

 body {
     font-family: Arial, sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-color: #f4f4f4;
     margin: 0;
 }

 form {
     background: #fff;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     max-width: 400px;
     width: 100%;
 }

 div {
     margin-bottom: 15px;
 }

 label {
     display: block;
     margin-bottom: 5px;
 }

 input {
     width: 100%;
     padding: 8px;
     box-sizing: border-box;
 }

 .error {
     color: red;
     font-size: 12px;
 }

 button {
     background-color: #007BFF;
     color: #fff;
     padding: 10px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
 }

 button:hover {
     background-color: #0056b3;
 }

登录后复制

第 3 步：实施 JavaScript 验证

创建一个新的 JavaScript 文件
- 创建一个名为 script.js 的新文件。

向表单添加事件监听器

向表单添加事件监听器来处理表单提交：

 document.getElementById('registrationForm').addEventListener('submit', function(event) {
     event.preventDefault();
     validateForm();
 });

登录后复制

创建验证函数

添加一个函数来验证表单字段：

 function validateForm() {
     // Clear previous error messages
     document.getElementById('nameError').innerText = '';
     document.getElementById('emailError').innerText = '';
     document.getElementById('passwordError').innerText = '';

     // Get form values
     const name = document.getElementById('name').value;
     const email = document.getElementById('email').value;
     const password = document.getElementById('password').value;

     // Validation flags
     let isValid = true;

     // Validate name
     if (name.trim() === '') {
         document.getElementById('nameError').innerText = 'Name is required';
         isValid = false;
     }

     // Validate email
     if (email.trim() === '') {
         document.getElementById('emailError').innerText = 'Email is required';
         isValid = false;
     } else if (!validateEmail(email)) {
         document.getElementById('emailError').innerText = 'Email is not valid';
         isValid = false;
     }

     // Validate password
     if (password.trim() === '') {
         document.getElementById('passwordError').innerText = 'Password is required';
         isValid = false;
     } else if (password.length < 6) {
         document.getElementById('passwordError').innerText = 'Password must be at least 6 characters';
         isValid = false;
     }

     // If all fields are valid, submit the form (for demonstration, we'll just alert a message)
     if (isValid) {
         alert('Form submitted successfully!');
     }
 }

 // Email validation function
 function validateEmail(email) {
     const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return re.test(String(email).toLowerCase());
 }

登录后复制