JS实现表单验证案例

JS实现表单验证是前端开发中经常用到的技术，可有效防止用户提交无效或不完整的数据。下面是一些实现表单验证的技巧。

第一步：获取表单元素

在JS中，使用DOM API获取表单元素非常简单。首先得到表单元素本身，然后可以通过表单的表单元素来访问表单元素。例如：

const form = document.querySelector('form');
const emailInput = form.querySelector('input[type="email"]');

从这里可以看到，第一行代码获取了一个具有“form”标记的元素（表单），而第二行代码获取了一个“email”输入字段。

第二步：验证输入

输入数据验证的方式有很多，常见的包括正则表达式、验证函数以及HTML5表单验证。以下是一个使用HTML5验证属性的例子：

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>

这里我们使用了“required”属性，它指示该字段是必须的。如果用户未输入任何内容，则会显示一个“Please fill out this field”消息。

第三步：防止表单提交

最后，必须添加防止表单提交的代码。通常，这会在JavaScript中完成，在“提交”按钮上注册事件监听器，以便在用户单击提交按钮时验证表单的输入并防止提交。例如：

const form = document.querySelector('form');
const emailInput = form.querySelector('input[type="email"]');

form.addEventListener('submit', function(event) {
  if (!emailInput.checkValidity()) {
    event.preventDefault();
    // 提示用户输入正确的Email
  }
});

当表单被提交时，检查“email”字段的有效性。如果该输入无效，则防止表单提交。

示例：验证电话号码

下面是一个例子，用JavaScript验证一个电话号码的格式是否正确。假设我们有一个输入字段“phone”，它的id是“phone”。

<form>
  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone">
  <button type="submit">Submit</button>
</form>

const form = document.querySelector('form');
const phoneInput = form.querySelector('#phone');

form.addEventListener('submit', function(event) {
  const isValidPhoneNumber = /^(\+)?\d{7,15}$/.test(phoneInput.value);
  if (!isValidPhoneNumber) {
    event.preventDefault();
    alert('Please enter a valid phone number.');
  }
});

在这个JavaScript代码中，我们首先得到了表单元素和输入元素。然后，通过用正则表达式验证输入来检查电话号码是否正确。如果电话号码无效，则阻止表单提交并显示错误消息。

示例：验证密码

下一个例子是一个密码验证。我们有一个输入字段“password”，以及一个确认密码“confirm-password”字段，两个输入都必须填写且匹配才能成功提交表单。

首先，让我们看看HTML代码：

<form>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <label for="confirm-password">Confirm Password:</label>
  <input type="password" id="confirm-password" name="confirm-password">
  <button type="submit">Submit</button>
</form>

接下来，JavaScript代码验证这些输入：

const form = document.querySelector('form');
const passwordInput = form.querySelector('#password');
const confirmPasswordInput = form.querySelector('#confirm-password');

form.addEventListener('submit', function(event) {
  const isValidPassword = /^.{6,}$/.test(passwordInput.value);
  if (!isValidPassword) {
    event.preventDefault();
    alert('Password must be at least 6 characters long.');
    return;
  }

  if (passwordInput.value !== confirmPasswordInput.value) {
    event.preventDefault();
    alert('Passwords do not match.');
  }
});

在这个代码中，我们使用第一个正则表达式验证密码必须至少包含6个字符。如果该检查失败，则阻止表单提交并显示错误消息。否则，代码检查“密码”和“确认密码”是否相同。如果这些输入不同，则阻止表单提交并显示错误消息。

需要注意的是，在提交表单之前，需要检查所有输入是否有效，并在发现任何无效输入时阻止表单提交。