js进行表单验证实例分析

2023年6月10日下午6:26 • JavaScript

下面就来详细讲解“js进行表单验证实例分析”的完整攻略。

1. 前言

在web开发中，表单验证是非常重要的一部分。它能够让用户输入合法的数据、提升网站的可用性、增强用户体验。而JavaScript是现代Web开发中应用最为广泛的脚本语言之一，提供了很多方法和工具用于表单验证。

2. 表单验证的实现

为了实现表单验证，我们需要使用HTML和JavaScript来实现以下步骤：

2.1. 编写HTML

首先，在HTML中创建一个表单：

<form id="myForm" method="post" action="">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" />

    <button type="submit">Submit</button>
</form>

其中，我们有三个input标签分别表示姓名（name）、邮箱（email）和密码（password）。

2.2. 编写JavaScript

然后，在JavaScript中编写验证逻辑：

// 获取表单DOM对象
var form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
    var name = form.elements['name'].value; // 获取姓名
    var email = form.elements['email'].value; // 获取邮箱
    var password = form.elements['password'].value; // 获取密码

    // 验证姓名是否为空
    if (name === '') {
        alert('Name can not be empty!');
        event.preventDefault(); // 阻止提交事件的发生
        return false;
    }

    // 验证邮箱格式是否正确
    var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if (!emailRegex.test(email)) {
        alert('Please provide a valid email address!');
        event.preventDefault();
        return false;
    }

    // 验证密码长度是否符合要求
    if (password.length < 6) {
        alert('Password must have at least 6 characters!');
        event.preventDefault();
        return false;
    }

    // 表单数据验证通过，可以提交表单数据了
    alert('Form has been submitted successfully!');
});

上述代码中我们监听了表单的submit事件，当表单提交时触发验证逻辑进行表单数据验证。

我们首先获取表单中的姓名、邮箱和密码。然后，我们使用JavaScript的正则表达式来验证邮箱的格式是否正确，如果不正确则提示用户重新输入，阻止表单提交事件的发生。接着，我们通过判断密码是否符合要求（长度不少于6）来判断表单数据验证是否通过。

最后，我们提示用户表单验证通过，并且可以提交表单数据了。

3. 示例说明

示例一：表单验证失败

当用户未输入姓名或输入格式不正确的邮箱时，验证失败：

// 获取表单DOM对象
var form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
    var name = form.elements['name'].value;
    var email = form.elements['email'].value;
    var password = form.elements['password'].value;

    // 验证姓名是否为空
    if (name === '') {
        alert('Name can not be empty!');
        event.preventDefault();
        return false;
    }

    // 验证邮箱格式是否正确
    var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if (!emailRegex.test(email)) {
        alert('Please provide a valid email address!');
        event.preventDefault();
        return false;
    }

    // 验证密码长度是否符合要求
    if (password.length < 6) {
        alert('Password must have at least 6 characters!');
        event.preventDefault();
        return false;
    }

    alert('Form has been submitted successfully!');
});

当用户未输入姓名时，将会提示用户“Name can not be empty!”；当用户输入格式有误的邮箱时，将会提示用户“Please provide a valid email address!”。

示例二：表单验证成功

当用户输入正确的表单数据时，验证成功：

// 获取表单DOM对象
var form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
    var name = form.elements['name'].value;
    var email = form.elements['email'].value;
    var password = form.elements['password'].value;

    // 验证姓名是否为空
    if (name === '') {
        alert('Name can not be empty!');
        event.preventDefault();
        return false;
    }

    // 验证邮箱格式是否正确
    var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if (!emailRegex.test(email)) {
        alert('Please provide a valid email address!');
        event.preventDefault();
        return false;
    }

    // 验证密码长度是否符合要求
    if (password.length < 6) {
        alert('Password must have at least 6 characters!');
        event.preventDefault();
        return false;
    }

    alert('Form has been submitted successfully!');
});

当用户正确输入姓名、邮箱和密码时，将会提示用户“Form has been submitted successfully!”，并且表单将会被成功提交。