JavaScript实现表单验证｜青训营当用户在网页中填写表单并提交时，我们需要对用户输入的数据进行验证，确保数据的

当用户在网页中填写表单并提交时，我们需要对用户输入的数据进行验证，确保数据的合法性。下面我将通过一个完整的项目实例来演示如何使用JavaScript实现表单验证的功能。

首先，我们创建一个包含表单的HTML页面。表单中包含姓名、邮箱和密码三个输入框，以及一个提交按钮。

<!DOCTYPE html>
<html>
<head>
    <title>表单验证示例</title>
    <script src="formValidation.js"></script>
</head>
<body>
    <h1>表单验证示例</h1>
    <form id="myForm">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required><br><br>
        
        <input type="submit" value="提交">
    </form>
</body>
</html>

接下来，我们需要创建一个JavaScript文件 formValidation.js，在该文件中实现表单验证的功能。

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    
    // 验证姓名是否为空
    if (name.trim() === "") {
        alert("请输入姓名");
        return;
    }
    
    // 验证邮箱格式是否正确
    var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailPattern.test(email)) {
        alert("请输入正确的邮箱");
        return;
    }
    
    // 验证密码长度是否符合要求
    if (password.length < 6) {
        alert("密码长度不能少于6位");
        return;
    }
    
    // 表单验证通过，可以进行提交操作
    alert("表单验证通过，可以进行提交操作");
});

在上述代码中，我们首先使用 addEventListener 方法为表单的提交事件添加一个监听器。当用户点击提交按钮时，该监听器会触发。

在监听器的回调函数中，我们首先使用 event.preventDefault() 方法阻止表单的默认提交行为，以便我们可以自己进行表单验证。

然后，我们通过 document.getElementById 方法获取到表单中的姓名、邮箱和密码的值。

接下来，我们使用简单的条件判断来验证用户输入的数据。例如，我们使用 trim() 方法去除姓名的两端空格，并判断是否为空。如果为空，则弹出提示信息，并使用 return 关键字终止表单的提交。

对于邮箱的验证，我们使用正则表达式 emailPattern 来判断邮箱格式是否正确。如果不正确，则弹出提示信息，并使用 return 关键字终止表单的提交。

对于密码的验证，我们简单判断密码的长度是否少于6位。如果是，则弹出提示信息，并使用 return 关键字终止表单的提交。

最后，如果表单验证通过，我们弹出提示信息，并可以继续进行表单的提交操作。

通过上述代码，我们实现了一个简单的表单验证功能。用户在填写表单并点击提交按钮时，会进行相应数据的验证，确保数据的合法性。如果验证不通过，则会弹出相应的提示信息。如果验证通过，则可以继续进行表单的提交操作。

JavaScript实现表单验证 ｜ 青训营

JavaScript实现表单验证｜青训营