实用的JS表单验证提示效果

要实现“实用的JS表单验证提示效果”，我们需要以下步骤：

1. 编写HTML代码

我们需要为表单元素添加id或class属性，以便我们可以使用JavaScript代码对其进行操作。

<form id="myForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required="required"><br>

  <label for="password">密  码:</label>
  <input type="password" id="password" name="password" required="required"><br>

  <button type="submit">提交</button>
</form>

2. 编写CSS代码

我们需要为提示框和表单元素添加样式。

/* 表单输入框样式 */
input{
  width: 200px;
  height: 30px;
  padding: 5px 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* 必填表单元素样式 */
input:required{
  border-color: #f00;
}

/* 提示框样式 */
.error{
  display: none;
  color: #f00;
  font-size: 14px;
}

3. 编写JavaScript代码

我们使用JavaScript代码来验证用户输入，并对用户错误提示。

// 获取表单元素
var myForm = document.getElementById("myForm");
var username = document.getElementById("username");
var password = document.getElementById("password");

// 给表单元素添加验证事件
myForm.addEventListener("submit",function(event){
  // 阻止表单默认提交行为，这样我们可以处理表单的验证
  event.preventDefault();

  // 验证用户名不能为空
  if(username.value == ""){
    showError(username,"用户名不能为空");
  }else{
    showSuccess(username);
  }

  // 验证密码不能为空
  if(password.value == ""){
    showError(password,"密码不能为空");
  }else{
    showSuccess(password);
  }

  // 如果所有表单元素都通过验证，则提交表单
  if(checkAll()){
    myForm.submit();
  }
});

// 验证表单元素是否通过验证
function checkAll(){
  // 获取所有表单元素
  var inputs = myForm.querySelectorAll("input");

  // 验证每一个表单元素是否通过验证
  for(var i = 0; i < inputs.length; i++){
    // 如果表单元素没有通过验证，则返回false
    if(inputs[i].parentNode.classList.contains("error")){
      return false;
    }
  }

  // 如果所有表单元素都通过验证，则返回true
  return true;
}

// 显示错误提示
function showError(input,message){
  // 获取表单元素的父级元素
  var parent = input.parentNode;

  // 添加错误提示样式
  parent.classList.add("error");

  // 显示错误提示框
  var error = parent.querySelector(".error");

  error.innerHTML = message;
  error.style.display = "block";
}

// 显示成功提示
function showSuccess(input){
  // 获取表单元素的父级元素
  var parent = input.parentNode;

  // 移除错误提示样式
  parent.classList.remove("error");

  // 隐藏错误提示框
  var error = parent.querySelector(".error");

  error.innerHTML = "";
  error.style.display = "none";
}

示例说明

示例1

假设我们要验证“年龄”表单元素是否大于18，如果小于或等于18，则提示“年龄必须大于18”。

<form id="myForm2">
  <label for="age">年龄:</label>
  <input type="number" id="age" name="age" required="required"><br>

  <button type="submit">提交</button>
</form>

// 获取表单元素
var myForm2 = document.getElementById("myForm2");
var age = document.getElementById("age");

// 给表单元素添加验证事件
myForm2.addEventListener("submit",function(event){
  // 阻止表单默认提交行为，这样我们可以处理表单的验证
  event.preventDefault();

  // 验证年龄是否大于18
  if(age.value <= 18){
    showError(age,"年龄必须大于18");
  }else{
    showSuccess(age);
  }

  // 如果所有表单元素都通过验证，则提交表单
  if(checkAll()){
    myForm2.submit();
  }
});

示例2

我们可以为必填表单元素添加data-rule属性，来设置自定义验证规则。

<form id="myForm3">
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required="required" data-rule="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" ><br>

  <button type="submit">提交</button>
</form>

// 获取表单元素
var myForm3 = document.getElementById("myForm3");
var email = document.getElementById("email");

// 给表单元素添加验证事件
myForm3.addEventListener("submit",function(event){
  // 阻止表单默认提交行为，这样我们可以处理表单的验证
  event.preventDefault();

  // 获取自定义验证规则
  var rule = email.getAttribute("data-rule");

  // 如果没有自定义验证规则，则跳过验证
  if(!rule) return;

  // 构造正则表达式
  var regex = new RegExp(rule);

  // 验证邮箱地址是否符合规则
  if(!regex.test(email.value)){
    showError(email,"邮箱格式不正确");
  }else{
    showSuccess(email);
  }

  // 如果所有表单元素都通过验证，则提交表单
  if(checkAll()){
    myForm3.submit();
  }
});