Logo

菜单

发布于 2026-01-06 0 阅读
0

使用 JavaScript 进行表单验证

使用 JavaScript 进行表单验证

在将数据提交到服务器之前，务必确保所有必填表单控件都已填写完整，且格式正确。这称为客户端表单验证，有助于确保提交的数据符合各个表单控件中规定的要求。

HTML验证

虽然也可以使用 HTML 属性（例如 - required、minlength-、maxlength-、min-、max-、type- 和pattern-）进行验证，但缺点是无法根据自身需求进行自定义。

什么是表单验证？

你是否曾经尝试注册过一些有特定要求的网站？例如：

  • 确保您的密码长度在 8 到 30 个字符之间，或者确保您的密码由字母、数字和星号混合组成。
  • 或者，确保在电子邮件输入字段中包含 @ 符号，并弹出类似“请输入有效的电子邮件地址”的消息。
  • “此字段为必填项”（此字段不能为空）

这叫做验证。当你在表单网站上输入信息时，浏览器和/或网络服务器会检查数据格式是否正确，以及是否符合应用程序设定的约束条件。

表单验证是指在将 HTML 表单中的数据提交到服务器之前，验证该数据是否准确、完整并符合指定标准的过程。

如果信息格式正确，应用程序允许将数据提交到服务器。如果信息格式不正确，则会向用户显示错误消息，说明需要更正的内容。

建造表格

让我们创建一个表单网页，以巩固我们对表单验证的理解。

HTML 代码

<div class="formContainer">
        <header>
            <h1>Sign In</h1>
            <a href="test1.html">CHECK</a>
        </header>

        <form id="myForm">
            <div class="formDetails">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name">
                <div class="errorMessage"></div>
            </div>

            <div class="formDetails">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email">
                <div class="errorMessage"></div>
            </div>

            <div class="formDetails">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password">
                <div class="errorMessage"></div>
            </div>

            <div class="formDetails">
                <label for="confirmpassword">Confirm Password:</label>
                <input type="password" id="confirmPassword" name="confirmpassword">
                <div class="errorMessage"></div>
            </div>

            <button id="button" type="submit">Submit</button>
          </form>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • HTML 代码定义了一个包含四个输入字段的表单：，，，name和。每个输入字段都包裹在一个带有 class 的 div 元素中。emailpasswordconfirm passwordformDetails
  • 每个输入框下方都有一个div类名为 `<error>` 的元素errorMessage。与相应输入框相关的任何错误信息都会显示在这里。
  • 表单中还有一个id为button的提交按钮。点击此按钮即可提交表单。

CSS 代码

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #021012;
    font-family: sans-serif;
}

.formContainer{
    width: 80%;
    height: 85vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #E2F4FD;
}
header{
    text-align: center;
    margin: 2rem 0;
    font-weight: 600;
}

#myForm{
    width: 90%;
    margin: 1rem auto;
}

.formDetails{
    margin: 1rem 0;
}

label{
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .4rem;
}

input{
    width: 100%;
    padding: .6rem 0;
    outline: none;
    font-size: 1rem;
}

input:focus{
    outline: 1px solid #064247;
}
button{
    margin: 1.1rem 0;
    background-color: #053135;
    color: #fff;
    font-weight: 600;
    border: none;
    padding: .8rem 0;
    width: 100%;
}
.errorMessage{
    margin-top: .3rem;
    font-size: .9rem;
    font-weight: 600;
    font-family: monospace;
}
.formDetails.success input {
    border-color: #09c372;
    outline: none;
  }

  .formDetails.error input {
    border-color: #f2070e;
  }

@media screen and (min-width: 1024px) {
    .formContainer{
        width: 30%;
    }
}
Enter fullscreen mode Exit fullscreen mode
  • 选择器将表单容器的.formContainer高度设置为父元素的高度，并将高度设置为视口高度，并使用定位和属性将其定位在屏幕中心。背景颜色设置为浅蓝色。width80%height85%absolutetransformtransform: translate(-50%, -50%)#021012
  • input`and`选择器会将父容器的button宽度设置为 `width` ，将选择器顶部和底部的内边距设置为 `padding` ，将`include` 设置为`width`，并将字体大小设置为 `font-size` 。此外，输入选择器还添加了焦点状态，该状态会以不同颜色的边框勾勒出输入框的轮廓。100%0.6reminputoutlinenone1rem1px solid
  • 输入选择器会在容器具有特定类名.formDetails.success时，将样式应用于输入元素。它会将边框颜色设置为浅绿色，并将轮廓设置为无。.formDetailssuccess
  • 输入选择器会在容器具有特定类名.formDetails.error时，将样式应用于输入元素。它会将边框颜色设置为深红色。.formDetailserror
@media screen and (min-width: 1024px) {
    .formContainer{
        width: 30%;
    }
}
Enter fullscreen mode Exit fullscreen mode
  • 该@media规则创建了一个媒体查询，当屏幕宽度大于 1024 像素时应用样式。在本例中，元素的宽度.formContainer设置为父元素宽度的 30%。这使得表单容器在大屏幕上显示时显得更小。

JavaScript 用于验证

  • 这段代码监听表单提交事件，默认情况下阻止表单提交。然后，它对每个输入字段进行验证，并在相应的 div 元素中显示错误信息，并根据验证结果errorMessage将成功或错误类应用到父div 元素上。formDetails
const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', (event) => {
    event.preventDefault(); 
}
Enter fullscreen mode Exit fullscreen mode
  • 对于每个input字段，代码首先获取输入值并去除所有空格。然后，它errorMessage使用querySelector相应的方法获取对应的 div 元素和输入元素。如果输入值为空，代码会将错误消息设置为相关消息，并将错误类应用于父formDetailsdiv 元素。如果输入值不为空，代码会清除错误消息，并将成功类应用于父formDetailsdiv 元素。
const name = myForm.elements.name.value.trim();
const nameError = document.querySelector('#name + .errorMessage');
const nameInput = document.getElementById('name');
if (name === '') {
    nameError.textContent = 'Name is required.';
      nameInput.parentNode.classList.add('error');
      nameInput.parentNode.classList.remove('success');
    } else {
      nameError.textContent = '';
      nameInput.parentNode.classList.add('success');
      nameInput.parentNode.classList.remove('error');
    }
Enter fullscreen mode Exit fullscreen mode
  • 对于电子邮件输入框，代码还会使用正则表达式检查电子邮件地址是否符合有效格式。如果电子邮件地址无效，代码会将错误消息设置为相关消息，并将错误类应用到父级formDetailsdiv 元素。
const email = myForm.elements.email.value.trim();
    const emailError = document.querySelector('#email + .errorMessage');
    const emailInput = document.getElementById('email');
    if (email === '') {
      emailError.textContent = 'Email is required.';
      emailInput.parentNode.classList.add('error');
      emailInput.parentNode.classList.remove('success');
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      emailError.textContent = 'Please enter a valid email address.';
      emailInput.parentNode.classList.add('error');
      emailInput.parentNode.classList.remove('success');
    } else {
      emailError.textContent = '';
      emailInput.parentNode.classList.add('success');
      emailInput.parentNode.classList.remove('error');
    }
Enter fullscreen mode Exit fullscreen mode
  • 对于密码输入框，代码还会检查密码长度是否至少为 8 个字符。如果密码长度不足 8 个字符，代码会将错误信息设置为相关提示，并将错误类应用到父级formDetailsdiv 元素。
const password = myForm.elements.password.value.trim();
    const passwordError = document.querySelector('#password + .errorMessage');
    const passwordInput = document.getElementById('password');
    if (password === '') {
      passwordError.textContent = 'Password is required.';
      passwordInput.parentNode.classList.add('error');
      passwordInput.parentNode.classList.remove('success');
    } else if (password.length < 8) {
      passwordError.textContent = 'Password is expected to be 8 characters.';
      passwordInput.parentNode.classList.add('error');
      passwordInput.parentNode.classList.remove('success');
    } else {
      passwordError.textContent = '';
      passwordInput.parentNode.classList.add('success');
      passwordInput.parentNode.classList.remove('error');
    }
Enter fullscreen mode Exit fullscreen mode
  • 对于确认密码输入框，代码还会检查确认密码是否与密码匹配。如果confirm不匹配，代码会将错误信息设置为相关消息，并将错误类应用到父级formDetailsdiv 元素。
const confirmPassword = myForm.elements.confirmpassword.value.trim();
    const confirmPasswordError = document.querySelector('#confirmPassword + .errorMessage');
    const confirmPasswordInput = document.getElementById('confirmPassword');
    if (confirmPassword === '') {
      confirmPasswordError.textContent = 'Confirm Password is required.';
      confirmPasswordInput.parentNode.classList.add('error');
      confirmPasswordInput.parentNode.classList.remove('success');
    } else if (confirmPassword !== password) {
      confirmPasswordError.textContent = 'Passwords do not match.';
      confirmPasswordInput.parentNode.classList.add('error');
      confirmPasswordInput.parentNode.classList.remove('success');
    } else {
      confirmPasswordError.textContent = '';
      confirmPasswordInput.parentNode.classList.add('success');
      confirmPasswordInput.parentNode.classList.remove('error');
    }
Enter fullscreen mode Exit fullscreen mode
  • 最后一步，代码会检查是否有任何错误信息显示。如果没有错误信息，代码会提交表单；否则，它会阻止表单提交。
if (nameError.textContent === '' && emailError.textContent === '' && passwordError.textContent === '' && confirmPasswordError.textContent === '') {
        myForm.submit();
      }
    });
Enter fullscreen mode Exit fullscreen mode

最终结果

在 Codepen 上查看。

如果您觉得这篇文章对您有帮助，请关注我，我会发布更多有用的文章。也欢迎您告诉我您感兴趣的学习方向。

文章来源：https://dev.to/tracy4code/form-validation-with-javascript-21l6
停止奖励数量！
通过努力成为网球冠军来解释归并排序