使用 JavaScript 进行表单验证

2025-05-27

使用 JavaScript 进行表单验证

表单几乎是每个 Web 开发者的日常工作。无论你创建什么网站，都会用到表单。在客户端验证表单数据对于提升用户体验来说是一项必不可少的功能。在本教程中，我们将使用 JavaScript 创建一个简单的表单验证。

虽然客户端表单验证提供了良好的用户体验，但它很容易被欺骗和绕过。为了防止恶意使用，你应该始终在服务器端验证表单数据。

视频教程

如果您想观看详细的分步视频，您可以查看我在Youtube 频道上制作的有关该项目的视频：

HTML

让我们从 HTML 标记开始。我们将创建一个containerdiv，用于定位和设置表单的样式。不出所料，我们将在其中创建一个form，并为其设置一个id，并将 设置action为，/因为我们实际上并不想提交此表单。

我们将创建四个输入字段，分别用于用户名、电子邮件、密码和密码确认。出于样式和控制目的，我们将这些input标签包装到div带有类的 s中input control。每个输入控件都将包含一个label、一个input和一个div带有类的error。每个输入都应具有 id 和 name 属性。标签应具有for与相应输入标签的 name 属性匹配的属性。对于输入类型，我们将使用text用户名和电子邮件，并使用其password作为密码和密码确认。带有类的 diverror将保存特定输入字段的错误消息。它现在为空，我们将使用 JavaScript 对其进行修改。

最后，我们需要添加一个按钮来“提交”表单。在本例中，我们不会真正提交表单，只是模拟提交。对于提交按钮，我将使用一个 type 为 的按钮submit。

<div class="container">
        <form id="form" action="/">
            <h1>Registration</h1>
            <div class="input-control">
                <label for="username">Username</label>
                <input id="username" name="username" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="email">Email</label>
                <input id="email" name="email" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password">Password</label>
                <input id="password"name="password" type="password">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password2">Password again</label>
                <input id="password2"name="password2" type="password">
                <div class="error"></div>
            </div>
            <button type="submit">Sign Up</button>
        </form>
    </div>
Enter fullscreen mode Exit fullscreen mode

这就是我们表单所需的 HTML 标记。让我们用 CSS 稍微设计一下。

CSS

本教程将提供一个简洁干净、宽敞的设计。我将设置线性渐变作为背景，并使用自定义的谷歌字体（您可以从这里安装）。

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

我们将为表单设置固定宽度，并设置边距使其居中，同时设置上边距，使其垂直方向略微下移。为了获得更多空间，我们设置了 20px 的内边距。我们将设置固定字体大小、浅色背景色，并设置边框半径以实现圆角。

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}
Enter fullscreen mode Exit fullscreen mode

对于表单标题，我们将使用深色文本颜色，并使用 将其水平居中text-align: center。提交按钮需要突出显示，因此我们将使用蓝色背景色和白色文本颜色。我们还将删除浏览器默认边框，并为其添加一些 border-radius。我们将使用 padding 和 margin 为其留出一些空间，并通过应用 100% 宽度使其达到全宽。

#form h1 {
    color: #0f2027;
    text-align: center;
}

#form button {
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
    background-color: rgb(41, 57, 194);
    border: none;
    border-radius: 4px;
}
Enter fullscreen mode Exit fullscreen mode

为了让输入框上下堆叠，我们将使用弹性盒子。为此，我们将设置display: flex;和flex-direction: column。对于输入框，我们将设置一个灰色边框，并设置一个较小的 border-radius。我们将 display 属性设置为block，并通过应用 width 100% 使它们全宽。我们还会设置一些 padding，使其更宽敞。我还将通过设置 ，在输入框获得焦点时删除轮廓outline: 0。

.input-control {
    display: flex;
    flex-direction: column;
}

.input-control input {
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    display: block;
    font-size: 12px;
    padding: 10px;
    width: 100%;
}

.input-control input:focus {
    outline: 0;
}
Enter fullscreen mode Exit fullscreen mode

我们将使用两个类（“success”和“error”）来向用户提供关于输入值是否有效的视觉反馈。我们将把这两个 JavaScript 类应用到包含特定输入字段的输入控件 div 中。如果存在 success 类，我们将设置绿色边框；如果存在 error 类，我们将使用红色边框。对于 error div，我们将使用较小的字体大小和红色来显示错误消息。

.input-control.success input {
    border-color: #09c372;
}

.input-control.error input {
    border-color: #ff3860;
}

.input-control .error {
    color: #ff3860;
    font-size: 9px;
    height: 13px;
}
Enter fullscreen mode Exit fullscreen mode

接下来让我们在 javascript 中进行验证！

JavaScript

我们要做的第一件事是保存表单和输入字段的引用。由于我们为每个输入和表单都指定了 ID，因此我们可以轻松地使用 来完成getElementById。

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
Enter fullscreen mode Exit fullscreen mode

为了防止表单自动提交，我们必须在表单submit事件上附加一个事件监听器。在这个事件处理函数中，我们必须调用preventDefault()一个函数来防止表单自动提交。我们不会直接提交表单，而是调用一个函数来验证输入，如果我们愿意，可以在每次检查通过后提交表单，但本教程中我们不会这样做。我们稍后validateInputs会创建它。validateInputs

form.addEventListener('submit', e => {
    e.preventDefault();

    validateInputs();
});
Enter fullscreen mode Exit fullscreen mode

我们还将创建两个辅助函数：setError，  setSuccess。我们将使用这些辅助函数来设置输入控件的错误或成功状态。让我们从 setError 开始。它接收两个参数：element，和message。该元素将是特定输入控件中的输入元素。所以首先我们必须获取输入控件的父 div。我们将它保存到变量中inputControl，然后使用parent输入元素的属性获取输入控件 div。接下来我们必须收集错误 div，并将其保存到变量中。我们可以通过使用错误类查询输入控件来做到这一点。
现在我们必须将错误 div 的 innerText 设置为我们在参数中获得的消息，并success从输入控件中删除类（如果存在）并添加错误类。

const setError = (element, message) => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = message;
    inputControl.classList.add('error');
    inputControl.classList.remove('success')
}
Enter fullscreen mode Exit fullscreen mode

setSuccess 方法非常相似。第一个区别是它不会接收消息作为参数。我们必须通过将其 innerText 设置为空字符串来清除错误显示。最后，我们必须反转类的应用。我们将该success类添加到 inputControl 并移除该类error（如果存在）。

const setSuccess = element => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = '';
    inputControl.classList.add('success');
    inputControl.classList.remove('error');
};
Enter fullscreen mode Exit fullscreen mode

我们将创建最后一个辅助函数来验证电子邮件地址。这是一个可选步骤，如果您不想使用正则表达式，只需将电子邮件字段的输入类型设置为即可email。该isValidEmail函数将接受一个字符串作为参数，并使用这个看起来很奇怪的正则表达式来检查它是否是有效的电子邮件地址。我们将使用String.test()函数根据正则表达式测试该字符串。我们还将把电子邮件转换为字符串并将其转换为小写。

const isValidEmail = email => {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}
Enter fullscreen mode Exit fullscreen mode

现在我们应该创建验证validateInputs函数。首先，我们将获取所有输入字段的值。我们可以通过获取输入字段引用的 value 属性值来实现。我们将调用该String.trim()函数，从值的开头和结尾删除空格（如果有）。
然后，我们可以开始验证输入。我们将使用if, else语句进行验证。对于用户名，我们将通过将值与空字符串进行比较来检查它是否为空。如果为空，我们将调用该setError函数并向其提供用户名元素以及我们的错误消息。否则，我们将setSuccess使用用户名元素调用该方法。现在，我们必须对其他输入字段执行此操作，但方法相同。

const validateInputs = () => {
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if(usernameValue === '') {
        setError(username, 'Username is required');
    } else {
        setSuccess(username);
    }
};
Enter fullscreen mode Exit fullscreen mode

对于电子邮件，我们将检查它是否已提供，如果为空则设置错误。如果不为空，我们将检查它是否是有效的电子邮件地址，如果无效则设置错误，否则我们将该字段设置为成功。

if(emailValue === '') {
        setError(email, 'Email is required');
    } else if (!isValidEmail(emailValue)) {
        setError(email, 'Provide a valid email address');
    } else {
        setSuccess(email);
    }
}
Enter fullscreen mode Exit fullscreen mode

对于密码，我们会检查它是否为空，如果不为空，我们会检查它是否超过 7 个字符。如果不是，我们会设置一个错误，否则我们会设置成功。

if(passwordValue === '') {
        setError(password, 'Password is required');
    } else if (passwordValue.length < 8 ) {
        setError(password, 'Password must be at least 8 character.')
    } else {
        setSuccess(password);
    }
}
Enter fullscreen mode Exit fullscreen mode

对于密码确认，我们将检查它是否为空，并且我们还应该检查密码确认的值是否等于密码的值。

if(password2Value === '') {
        setError(password2, 'Please confirm your password');
    } else if (password2Value !== passwordValue) {
        setError(password2, "Passwords doesn't match");
    } else {
        setSuccess(password2);
    }
}
Enter fullscreen mode Exit fullscreen mode

现在我们已经验证了每个输入，如果我们愿意，我们现在就可以将表单提交到特定的端点。

干得好，现在你已经有了一个可以运行的表单验证 JavaScript。请注意，你必须始终在服务器端验证表单输入，因为客户端验证很容易被绕过。在现代 Web 开发中，我们使用了更多高级的表单验证方法和库，但这个项目确实是一个入门和学习基础知识的好方法。

您可以在哪里向我了解更多信息？

我创建了涵盖多个平台上的 Web 开发的教育内容，请随意查看。

我还创建了一个简报，分享我创作的一周或两周的教育内容。不废话💩，只讲教育内容。

🔗 链接：

文章来源：https://dev.to/javascriptacademy/form-validation-using-javascript-34je
Devto 翻译
PREV
10 门面向前端开发人员学习 Docker 的免费课程 10. Docker 和容器：概览
NEXT
学习 Webpack 概念并创建自定义 Webpack 插件。