JS实现支持Ajax验证的表单插件

本文为大家分享了一个表单验证插件，支持ajax验证，使用起来很简单。
每个需要验证的表单元素下面有一个span标签，这个标签的class有一个valid表示需要验证，如果有nullable则表示可为空；rule表示验证规则，msg表示错误提示信息；to表示要验证的元素的name值，如果元素是单个的，to可以不写。该插件会遍历每个有valid的span标签，找出它前面需要验证的元素，根据rule验证，如果验证不通过，则显示边框为红色，鼠标放在元素上时显示错误信息。

验证时机：1、点击提交按钮时显式调用验证方法；2、当元素触发blur时验证。

插件代码：
CSS：

.failvalid
{
  border: solid 2px red !important;
}

JS：

SimpoValidate = {
  //验证规则
  rules: {
    int: /^[1-9]d*$/,
    number: /^[+-]?d*.?d+$/
  },

  //初始化
  init: function () {
    $(".valid").each(function () { //遍历span
      if ($(this)[0].tagName.toLowerCase() == "span") {
 var validSpan = $(this);
 var to = validSpan.attr("to");
 var target;
 if (to) {
   target = $("input[name='" + to + "'],select[name='" + to + "'],textarea[name='" + to + "']");
 } else {
   var target = validSpan.prev();
 }
 if (target) {
   target.blur(function () {
     SimpoValidate.validOne(target, validSpan);
   });
 }
      }
    });
  },

  //验证全部，验证成功返回true
  valid: function () {
    SimpoValidate.ajaxCheckResult = true;
    var bl = true;

    $(".valid").each(function () { //遍历span
      if ($(this)[0].tagName.toLowerCase() == "span") {
 var validSpan = $(this);
 var to = validSpan.attr("to");
 var target;
 if (to) {
   target = $("input[name='" + to + "'],select[name='" + to + "'],textarea[name='" + to + "']");
 } else {
   target = validSpan.prev();
 }
 if (target) {
   if (!SimpoValidate.validOne(target, validSpan)) {
     bl = false;
   }
 }
      }
    });

    return bl && SimpoValidate.ajaxCheckResult;
  },

  //单个验证，验证成功返回true
  validOne: function (target, validSpan) {
    SimpoValidate.removehilight(target, msg);

    var rule = SimpoValidate.getRule(validSpan);
    var msg = validSpan.attr("msg");
    var nullable = validSpan.attr("class").indexOf("nullable") == -1 ? false : true; //是否可为空
    var to = validSpan.attr("to");
    var ajaxAction = validSpan.attr("ajaxAction");

    if (target) {
      //checkbox或radio
      if (target[0].tagName.toLowerCase() == "input" && target.attr("type") && (target.attr("type").toLowerCase() == "checkbox" || target.attr("type").toLowerCase() == "radio")) {
 var checkedInput = $("input[name='" + to + "']:checked");
 if (!nullable) {
   if (checkedInput.length == 0) {
     SimpoValidate.hilight(target, msg);
     return false;
   }
 }
      }

      //input或select
      if (target[0].tagName.toLowerCase() == "input" || target[0].tagName.toLowerCase() == "select") {
 var val = target.val();
 if (!nullable) {
   if ($.trim(val) == "") {
     SimpoValidate.hilight(target, msg);
     return false;
   }
 }
 else {
   if ($.trim(val) == "") {
     SimpoValidate.removehilight(target, msg);
     return true;
   }
 }

 if (rule) {
   var reg = new RegExp(rule);
   if (!reg.test(val)) {
     SimpoValidate.hilight(target, msg);
     return false;
   }
 }

 if (ajaxAction) {
   SimpoValidate.ajaxCheck(target, val, ajaxAction);
 }
      }
      else if (target[0].tagName.toLowerCase() == "textarea") {
 var val = target.text();
 if (!nullable) {
   if ($.trim(val) == "") {
     SimpoValidate.hilight(target, msg);
     return false;
   }
 }
 else {
   if ($.trim(val) == "") {
     SimpoValidate.removehilight(target, msg);
     return true;
   }
 }

 if (rule) {
   var reg = new RegExp(rule);
   if (!reg.test(val)) {
     SimpoValidate.hilight(target, msg);
     return false;
   }
 }

 if (ajaxAction) {
   SimpoValidate.ajaxCheck(target, val, ajaxAction);
 }
      }
    }

    return true;
  },

  ajaxCheckResult: true,

  ajaxCheck: function (target, value, ajaxAction) {
    var targetName = target.attr("name");
    var data = new Object();
    data[targetName] = value;

    $.ajax({
      url: ajaxAction,
      type: "POST",
      data: data,
      async: false,
      success: function (data) {
 if (data.data == true) {
   SimpoValidate.removehilight(target);
 }
 else {
   SimpoValidate.ajaxCheckResult = false;
   SimpoValidate.hilight(target, data.data);
 }
      }
    });
  },

  //获取验证规则
  getRule: function (validSpan) {
    var rule = validSpan.attr("rule");
    switch ($.trim(rule)) {
      case "int":
 return this.rules.int;
      case "number":
 return this.rules.number;
      default:
 return rule;
 break;
    }
  },

  //红边框及错误提示
  hilight: function (target, msg) {
    target.addClass("failvalid");
    target.bind("mouseover", function (e) {
      SimpoValidate.tips(target, msg, e);
    });
    target.bind("mouseout", function () {
      SimpoValidate.removetips();
    });
  },

  //取消红边框及错误提示
  removehilight: function (target) {
    target.unbind("mouseover");
    target.unbind("mouseout");
    target.removeClass("failvalid");
    SimpoValidate.removetips();
  },

  //显示提示
  tips: function (target, text, e) {
    var divtipsstyle = "position: absolute; z-index:99999; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; font-size:12px;";
    $("body").append("" + text + "");

    var divtips = $(".div-tips");
    divtips.css("visibility", "visible");

    var top = e.clientY + $(window).scrollTop() - divtips.height() - 18;
    var left = e.clientX;
    divtips.css("top", top);
    divtips.css("left", left);

    $(target).mousemove(function (e) {
      var top = e.clientY + $(window).scrollTop() - divtips.height() - 18;
      var left = e.clientX;
      divtips.css("top", top);
      divtips.css("left", left);
    });
  },

  //移除提示
  removetips: function () {
    $(".div-tips").remove();
  }
};

$(function () {
  SimpoValidate.init();
});

如何使用：
Edit页面：

@using Model.Suya;
@{
  ViewBag.Title = "Add";
  Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
  List postList = (List)ViewData["postList"];
  sys_post post = (sys_post)ViewData["post"];
}


  
  

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助。