在标签 jquery 中显示的错误消息 - Javascript

在前端开发中，我们常常需要对用户进行一些输入验证或者错误提示。使用 jquery 可以让 this 这个关键字指向我们所操作的 DOM 元素，非常方便。下面介绍在 jquery 中显示错误消息的方法。

错误消息代码

// 显示错误消息
function showErrorMsg(msg, $target) {
  var $errorMsg = $('<span class="error-msg">' + msg + '</span>');
  $errorMsg.insertAfter($target);
}

// 隐藏错误消息
function hideErrorMsg($target) {
  $target.next('.error-msg').remove();
}

// 校验表单
function validateForm($form) {
  var isValid = true;
  $form.find('input').each(function() {
    if (!$(this).val()) {
      showErrorMsg('请填写必填项', $(this));
      isValid = false;
    } else {
      hideErrorMsg($(this));
    }
  });
  return isValid;
}

代码解释

以上代码中，我们定义了三个函数。

• showErrorMsg()：用于显示错误消息。它接受两个参数，第一个参数是错误消息内容，第二个参数是需要在它后面显示的元素。
• hideErrorMsg()：用于隐藏错误消息。它接受一个参数，即需要隐藏错误消息的元素。
• validateForm()：用于表单校验。它接受一个表单元素作为参数，校验表单中所有输入框是否都有值，如果有空值，则显示错误消息，否则隐藏错误消息。

在使用时，我们只需要调用 validateForm() 函数即可。

总结

展示错误消息是我们经常需要做的事情，以上代码在 jquery 下可以轻松实现，同时具备良好的可复用性和扩展性。