原生js验证简洁注册登录页面

当我们需要开发一个简洁的注册登录页面时，JavaScript 可以用来验证用户输入的数据是否符合要求。以下是一些步骤来实现这个过程。

1. 获取表单数据

我们首先需要获取用户输入的数据，比如注册表单中的用户名、密码和电子邮箱。我们可以使用 document.getElementById 来获取表单中 input 标签的值。

示例 1：获取用户名

var username = document.getElementById("username").value;

2. 验证表单数据

接下来，需要验证用户输入的数据是否符合要求，这里可以使用一系列的正则表达式来验证每一个输入项。

示例 2：使用正则表达式验证电子邮

var email = document.getElementById("email").value;
if (!/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(email)) {
  //邮件格式不正确
}

3. 显示错误信息

当数据验证不通过的时候，我们需要向用户展示错误消息。我们可以使用 innerHTML 改变表单中的错误消息。

示例 3：显示错误消息

var error = document.getElementById("error");
error.innerHTML = "用户名不符合要求";

4. 阻止表单提交

当表单数据不符合要求时，我们需要阻止表单提交，以便用户能够重新修改错误的输入数据。

示例 4：防止表单提交

document.getElementById("form").addEventListener("submit", function(event) {
  if (username.trim() === "" || password.trim() === "") {
    event.preventDefault();
  }
});

5. 成功后的提示信息

当数据验证成功时，我们需要向用户展示成功消息。

示例 5：展示成功消息

var success = document.getElementById("success");
success.innerHTML = "注册成功";

这些步骤可以帮助我们开发出一个安全高效的原生 JavaScript 表单验证方案。