JavaScript实现表单验证案例

下面我将详细讲解JavaScript实现表单验证的完整攻略。这个攻略将分为以下几个部分：

规划表单验证的流程和步骤
编写JavaScript代码实现表单验证
示例说明1：验证用户名和密码
示例说明2：验证邮箱地址格式

规划表单验证的流程和步骤

在开始编写JavaScript代码之前，我们需要先规划表单验证的流程和步骤。一般情况下，表单验证的流程如下：

获取表单中需要验证的数据，并设置验证规则
根据验证规则，对获取的数据进行验证
如果数据符合规则，则提交表单；如果不符合规则，则给出提示信息，不提交表单

有了验证流程的规划，我们就可以开始编写代码了。

编写JavaScript代码实现表单验证

下面是一个简单的JavaScript代码实现表单验证的示例：

const form = document.querySelector('#login-form');
const userName = form.querySelector('#user-name');
const password = form.querySelector('#password');

form.addEventListener('submit', function (event) {
  event.preventDefault();
  if (userName.value === '' || password.value === '') {
    alert('用户名和密码不能为空');
    return;
  }
  if (userName.value.length < 6 || userName.value.length > 12) {
    alert('用户名长度必须在6-12个字符之间');
    return;
  }
  if (password.value.length < 6 || password.value.length > 12) {
    alert('密码长度必须在6-12个字符之间');
    return;
  }
  form.submit();
});

这段代码的功能是验证用户名和密码是否符合要求，如果符合要求则提交表单，否则给出提示信息。具体来说，我们依次进行如下验证：

验证用户名和密码是否为空，如果为空则给出提示信息（行4-7）
验证用户名长度是否在6-12个字符之间，如果不是则给出提示信息（行9-12）
验证密码长度是否在6-12个字符之间，如果不是则给出提示信息（行14-17）
如果所有验证都通过，则提交表单（行19）

这是一个简单的表单验证例子，下面我们将通过两个示例说明如何更加详细地实现表单验证。

示例说明1：验证用户名和密码

假设我们现在有一个登录表单，需要验证用户名和密码是否符合规定。对于这个表单，我们需要以下步骤：

获取表单元素和需要验证的数据
对数据进行验证，如果不符合规则则给出提示信息
如果验证通过，则提交表单

下面是相应的代码实现:

<form id="login-form">
  <label for="user-name">用户名：</label>
  <input type="text" id="user-name" name="username" placeholder="请输入用户名" required>
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" placeholder="请输入密码" required>
  <br>
  <input type="submit" id="submit" value="登录">
</form>

<script>
const form = document.querySelector('#login-form');
const userName = form.querySelector('#user-name');
const password = form.querySelector('#password');

form.addEventListener('submit', function (event) {
  event.preventDefault();
  if (userName.value === '' || password.value === '') {
    alert('用户名和密码不能为空');
    return;
  }
  if (userName.value.length < 6 || userName.value.length > 12) {
    alert('用户名长度必须在6-12个字符之间');
    return;
  }
  if (password.value.length < 6 || password.value.length > 12) {
    alert('密码长度必须在6-12个字符之间');
    return;
  }
  form.submit();
});
</script>

这段代码实现了对用户名和密码的验证，具体来说：

（第1步）获取表单元素和需要验证的数据，使用元素的querySelector()和querySelectorAll()方法获取。
（第2步）对数据进行验证，使用条件语句和逻辑运算符判断数据是否符合规则。如果数据不符合规则，则使用alert()方法给出提示信息，并使用return语句防止表单提交；如果数据验证通过，则继续执行下一项验证。
（第3步）如果数据全部验证通过，则使用表单的submit()方法提交表单，并跳转到登录页面。为防止表单默认提交，我们使用了事件对象的preventDefault()方法。

示例说明2：验证邮箱地址格式

下面我们再通过一个示例说明如何验证邮箱地址的格式。这个示例中，我们需要验证用户输入的邮箱地址是否符合邮件地址格式，以及邮箱地址是否存在。

首先，我们需要使用正则表达式来验证邮箱地址。对于一个合法的邮件地址，应该满足以下规则：

邮箱地址由用户名和域名两部分组成，用@符号连接
用户名可以包含字母、数字、下划线和点号
域名由域名服务器和顶级域名组成，且顶级域名为2-6个字母组成
如果邮箱地址不符合上述规则，则认为是非法的

其次，我们需要使用AJAX技术来验证邮箱地址是否存在。具体来说，我们需要通过AJAX请求向服务器发送请求，然后根据服务器的响应给出相应的提示信息。

下面是相应的代码实现：

<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱地址" required>
<br>
<button id="check-email">检查邮箱地址</button>

<script>
const button = document.querySelector('#check-email');
const email = document.querySelector('#email');

button.addEventListener('click', function() {
  const pattern = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
  if (!pattern.test(email.value)) {
    alert('邮箱地址不合法');
    return;
  }

  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/checkemail?email=' + email.value);
  xhr.send();
  xhr.addEventListener('load', function() {
    if (xhr.status === 200) {
      const res = JSON.parse(xhr.responseText);
      if (res.code === 0) {
        alert('邮箱地址可用');
      } else {
        alert('邮箱地址已被占用');
      }
    } else {
      alert('服务器错误');
    }
  })
})
</script>

这段代码实现了下面的功能：

（第1步）获取表单元素和需要验证的数据，使用元素的querySelector()和querySelectorAll()方法获取。
（第2步）对数据进行验证，使用正则表达式/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/判断数据是否符合规则。如果数据不符合规则，则使用alert()方法给出提示信息，并使用return语句防止表单提交；如果数据验证通过，则使用AJAX发送请求。
（第3步）使用AJAX技术向服务器发送请求，并根据服务器响应提供相应的提示信息。具体来说，我们使用XMLHttpRequest()对象来发送GET请求，并使用addEventListener()方法监听请求状态。如果状态码为200，则说明请求成功，我们使用JSON.parse()方法将响应数据转化为JSON格式，并根据服务器的响应数据提供相应的提示信息。