效果

 

function validateRequiredFields(formId) {
  var form = document.getElementById(formId);
  var elements = form.elements;
  var valid = true;
  
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    if (element.hasAttribute("req")) {
      var value = element.value.trim();
      if (value === "") {
        valid = false;
        showError(element, "必填项不能为空");
      } else {
        hideError(element, "必填项不能为空");
      }
      
      if (element.hasAttribute("min")) {
        var minLength = parseInt(element.getAttribute("min"));
        if (value.length < minLength) {
          valid = false;
          showError(element, "必须至少输入" + minLength + "个字符");
        } else {
          hideError(element, "必须至少输入" + minLength + "个字符");
        }
      }
      
      if (element.hasAttribute("max")) {
        var maxLength = parseInt(element.getAttribute("max"));
        if (value.length > maxLength) {
			 valid = false;
		    showError(element, "最多只能输入" + maxLength + "个字符");
			element.value = value.substr(0, maxLength);
        } else {
          hideError(element, "最多只能输入" + maxLength + "个字符");
        }
      }
      
      if (element.hasAttribute("type")) {
        var type = element.getAttribute("type");
        switch (type) {
          case "idcard":
            if (!validateIdCard(value)) {
              valid = false;
              showError(element, "身份证号码格式不正确");
            } else {
              hideError(element, "身份证号码格式不正确");
            }
            break;
          case "phone":
            if (!validatePhone(value)) {
              valid = false;
              showError(element, "手机号码格式不正确");
            } else {
              hideError(element, "手机号码格式不正确");
            }
            break;
          case "email":
            if (!validateEmail(value)) {
              valid = false;
              showError(element, "邮箱格式不正确");
            } else {
              hideError(element, "邮箱格式不正确");
            }
            break;
          case "number":
            if (!validateNumber(value)) {
              valid = false;
              showError(element, "必须输入数字");
            } else {
              hideError(element, "必须输入数字");
            }
            break;
        }
      }
      
      element.addEventListener("change", function() {
        validateRequiredFields(formId);
      });
    }
  }
  
  return valid;
}

function showError(element, message) {
  element.style.border = "1px solid red";
  element.style.backgroundColor = "#FEE";
  var errorSpan = element.nextSibling;
  if (!errorSpan || errorSpan.className !== "error") {
    errorSpan = document.createElement("span");
    errorSpan.className = "error";
    errorSpan.style.color = "red";
    errorSpan.style.fontSize = "12px";
    element.parentNode.insertBefore(errorSpan, element.nextSibling);
  }
  errorSpan.innerHTML = message;
}

function hideError(element, message) {
  element.style.border = "";
  element.style.backgroundColor = "";
  var errorSpan = element.nextSibling;
  if (errorSpan && errorSpan.className === "error" && errorSpan.innerHTML === message) {
    errorSpan.parentNode.removeChild(errorSpan);
  }
}

function validateIdCard(idCard) {
  var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  return pattern.test(idCard);
}

function validatePhone(phone) {
  var pattern = /^1[3456789]\d{9}$/;
  return pattern.test(phone);
}

function validateEmail(email) {
  var pattern = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
  return pattern.test(email);
}

function validateNumber(number) {
  var pattern = /^\d+$/;
  return pattern.test(number);
}