JavaScript 表单验证学习笔记

在 Web 开发中，表单验证是非常重要的一环。它可以帮助我们保证用户输入的数据的合法性，提高系统的安全性和可靠性。而 JavaScript 则是一种常用的实现表单验证的编程语言。接下来，我们将详细介绍如何使用 JavaScript 实现表单验证。

表单验证的基本原理

在 HTML 中，表单是用 <form> 标签定义的，并且可以包含多个控件，例如文本框、下拉框、单选框等。要进行表单验证，我们需要先获取表单元素以及各个控件的值，然后根据预先设定好的规则，检查这些值是否符合要求。

通常情况下，一个完整的表单验证流程应该包括以下几个步骤：

1. 获取表单元素和各个控件的值。
2. 对这些值进行检查，例如检查是否为空、是否符合格式要求等。
3. 如果有错误，则提示用户并阻止表单提交；如果没有错误，则可以提交表单。

JavaScript 实现表单验证的方法

在 JavaScript 中，我们可以通过 DOM（Document Object Model）来获取表单元素和各个控件的值。而对于验证部分，则需要编写一些 JavaScript 函数，并将它们与 HTML 中的表单元素绑定在一起。

以下是一个简单的 JavaScript 函数，用于检查输入的字符串是否为空：

javascriptCopy Code
function isEmpty(str) {
    if (str == null || str.trim().length === 0) {
        return true;
    }
    return false;
}

我们可以将这个函数与 HTML 中的输入框绑定，例如：

htmlCopy Code
<input type="text" id="name" name="name" placeholder="请输入姓名" onblur="checkName()">

在这个例子中，onblur="checkName()" 表示当这个输入框失去焦点时，会调用名为 checkName() 的 JavaScript 函数。而下面就是这个函数的定义：

javascriptCopy Code
function checkName() {
    var name = document.getElementById("name").value;
    if (isEmpty(name)) {
        alert("姓名不能为空！");
        return false;
    }
    return true;
}

在这个函数中，我们首先获取了 id 为 name 的输入框的值，然后使用刚才定义的 isEmpty() 函数检查这个值是否为空。如果为空，则弹出提示框并阻止表单提交，否则就允许提交表单。

实例：注册页面的表单验证

最后，我们来看一个完整的表单验证实例。假设我们要编写一个用户注册页面，它包含以下几个控件：

• 用户名（必填，长度不超过 20 个字符）
• 密码（必填，长度不少于 6 个字符）
• 电子邮件地址（必须符合标准格式）
• 手机号码（必须符合标准格式）

我们可以先在 HTML 文件中定义这些控件：

htmlCopy Code
<form id="register-form" onsubmit="return validateForm()">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>

    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br>

    <label for="email">电子邮件地址：</label>
    <input type="text" id="email" name="email"><br>

    <label for="phone">手机号码：</label>
    <input type="text" id="phone" name="phone"><br>

    <input type="submit" value="提交">
</form>

注意到这里我们为整个表单定义了一个 id 为 register-form 的属性，以便于后续的 JavaScript 验证。同时，在 <form> 标签中，我们也指定了 onsubmit="return validateForm()"，这表示当用户点击表单提交按钮时，会调用一个名为 validateForm() 的 JavaScript 函数。

下面是 validateForm() 函数的具体实现：

javascriptCopy Code
function validateForm() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var email = document.getElementById("email").value;
    var phone = document.getElementById("phone").value;

    if (isEmpty(username)) {
        alert("用户名不能为空！");
        return false;
    } else if (username.length > 20) {
        alert("用户名不能超过 20 个字符！");
        return false;
    }

    if (isEmpty(password)) {
        alert("密码不能为空！");
        return false;
    } else if (password.length < 6) {
        alert("密码长度不能少于 6 个字符！");
        return false;
    }

    if (!checkEmail(email)) {
        alert("电子邮件地址格式不正确！");
        return false;
    }

    if (!checkPhone(phone)) {
        alert("手机号码格式不正确！");
        return false;
    }

    alert("注册成功！");
    return true;
}

function checkEmail(email) {
    // 正则表达式验证邮箱
    var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    return pattern.test(email);
}

function checkPhone(phone) {
    // 正则表达式验证手机号码
    var pattern = /^1[3456789]\d{9}$/;
    return pattern.test(phone);
}

在这个例子中，我们首先定义了一个名为 validateForm() 的函数，它会获取整个表单的元素和控件的值，然后按照预设的规则进行校验。如果发现任何一个规则被违反，则弹出错误提示框并阻止表单提交；否则就弹出注册成功的提示框，并允许表单提交。

另外，我们还定义了名为 checkEmail() 和 checkPhone() 的两个函数，分别用于验证输入的电子邮件地址和手机号码是否符合标准格式。这里采用了常用的正则表达式方式进行验证。