JavaScript 基础表单验证示例(纯Js实现)

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

JavaScript 基础表单验证是前端开发中非常重要的一环，有了良好的表单验证可以避免用户输入错误数据，提高用户体验。本文将详细讲解如何基于纯 JavaScript 实现一个表单验证的示例。

准备工作

在开始之前，需要准备一个基本的 HTML 表单，用于演示验证的过程。我们首先创建一个 index.html 文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>表单验证</title>
    <meta charset="UTF-8">
</head>
<body>
    <form action="" method="POST">
        <label>用户名：</label>
        <input type="text" id="username" name="username"><br>
        <label>密码：</label>
        <input type="password" id="password" name="password"><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

这里创建了一个包含用户名和密码输入框的表单，并有一个提交按钮。接下来我们使用 JavaScript 对这个表单进行验证。

实例一：验证用户名

我们首先来看一个验证用户名的例子。我们需要对用户名进行如下验证：

用户名不能为空
用户名长度在 3 至 10 个字符之间
用户名只能包含字母和数字

我们可以在 JavaScript 中定义如下的验证函数：

function validateUsername() {
    var username = document.getElementById('username').value;
    // 判断用户名是否为空
    if (username == '') {
        alert('用户名不能为空！');
        return false;
    }
    // 判断用户名长度是否在 3 到 10 个字符之间
    if (username.length < 3 || username.length > 10) {
        alert('用户名长度必须在 3 到 10 个字符之间！');
        return false;
    }
    // 判断用户名是否只包含字母和数字
    if (!/^[a-zA-Z0-9]+$/.test(username)) {
        alert('用户名只能包含字母和数字！');
        return false;
    }
    return true;
}

这个函数首先获取用户名的值，然后分别判断是否满足空、长度和格式的校验条件。如果验证失败，就弹出一个提示框，并返回 false 值，表示验证失败；否则返回 true 值，表示验证成功。

我们可以在提交按钮的 onClick 事件上调用这个函数，来验证用户名是否合法。修改 HTML 文件中的代码如下：

<input type="submit" value="提交" onClick="return validateUsername();">

这里要注意，我们在提交按钮的 onClick 事件上调用了 validateUsername() 函数，并使用 return 语句将函数的返回值传递给提交按钮，表示是否允许表单提交。

现在，如果用户名为空、长度不符合要求或不只包含字母和数字，就会弹出相应的提示框，并禁止提交表单。

实例二：验证密码

接下来我们再来看一个验证密码的例子。我们需要对密码进行如下验证：

密码不能为空
密码长度在 6 至 20 个字符之间
密码只能包含字母和数字

我们可以在 JavaScript 中定义如下的验证函数：

function validatePassword() {
    var password = document.getElementById('password').value;
    // 判断密码是否为空
    if (password == '') {
        alert('密码不能为空！');
        return false;
    }
    // 判断密码长度是否在 6 到 20 个字符之间
    if (password.length < 6 || password.length > 20) {
        alert('密码长度必须在 6 到 20 个字符之间！');
        return false;
    }
    // 判断密码是否只包含字母和数字
    if (!/^[a-zA-Z0-9]+$/.test(password)) {
        alert('密码只能包含字母和数字！');
        return false;
    }
    return true;
}

这个函数的实现与验证用户名的函数类似。我们同样可以在提交按钮的 onClick 事件上调用这个函数，来验证密码是否合法。修改 HTML 文件中的代码如下：

<input type="submit" value="提交" onClick="return validatePassword();">

这样，我们就可以通过这两个函数来对表单进行基本的验证了。

总结

本文介绍了如何基于纯 JavaScript 实现一个基础的表单验证。我们以验证用户名和密码为例，演示了如何编写和调用验证函数。实际项目中，我们还可以对表单进行更加复杂的验证，比如验证手机号、邮箱等。在实际开发中，良好的表单验证有助于提高用户体验和减少错误数据的输入，大家可以参考本文实现自己的表单验证组件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 基础表单验证示例(纯Js实现) - Python技术站