本文為大家分享了一個表單驗證插件，支持ajax驗證，使用起來很簡單。

每個需要驗證的表單元素下面有一個span標(biāo)簽，這個標(biāo)簽的class有一個valid表示需要驗證，如果有nullable則表示可為空；rule表示驗證規(guī)則，msg表示錯誤提示信息；to表示要驗證的元素的name值，如果元素是單個的，to可以不寫。該插件會遍歷每個有valid的span標(biāo)簽，找出它前面需要驗證的元素，根據(jù)rule驗證，如果驗證不通過，則顯示邊框為紅色，鼠標(biāo)放在元素上時顯示錯誤信息。

驗證時機(jī)：1、點(diǎn)擊提交按鈕時顯式調(diào)用驗證方法；2、當(dāng)元素觸發(fā)blur時驗證。

插件代碼：

CSS：

.failvalid

{

  border: solid 2px red !important;

}

JS：

/**

* 驗證插件

*/

SimpoValidate = {

  //驗證規(guī)則

  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);

        }

      }

    });

  },

  //獲取驗證規(guī)則

  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("<div class='div-tips' style='" + divtipsstyle + "'>" + text + "</div>");

    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<sys_post> postList = (List<sys_post>)ViewData["postList"];

  sys_post post = (sys_post)ViewData["post"];

}

<script type="text/javascript">

  $(function () {

    //部門樹

    $('#dept').combotree({

      url: 'GetDeptTree',

      required: false,

      checkbox: true,

      onLoadSuccess: function () {

        $('#dept').combotree('setValue', "@(post.depCode)");

      }

    });

    //操作結(jié)果

    $("#ifrm").load(function (data) {

      var data = eval("(" + $("#ifrm").contents().find("body").html() + ")");

      alert(data.msg);

      if (data.ok) back();

    });

    $("select[name='postLevel']").find("option[value='@(post.postLevel)']").attr("selected", "selected");

  });

  //保存

  function save() {

    if (valid()) {

      $("#frm").submit();

    }

  }

  //驗證

  function valid() {

    var dept = $("input[name='dept']");

    if (!dept.val()) {

      SimpoValidate.hilight(dept.parent(), "請選擇所屬部門");

    } else {

      SimpoValidate.removehilight(dept.parent());

    }

    return SimpoValidate.valid();

  }

  //返回

  function back() {

    parent.$('#ttTab').tabs('select', "崗位管理");

    var tab = parent.$('#ttTab').tabs('getSelected');

    tab.find("iframe").contents().find("#btnSearch").click();

    parent.$("#ttTab").tabs('close', '修改崗位信息');

  }

</script>

<div class="tiao">

  <input type="button" class="submit_btn" value="保存" onclick="save()" />

  <input type="button" class="submit_btn" value="返回" onclick="back()" />

</div>

<iframe id="ifrm" name="ifrm" style="display: none;"></iframe>

<form id="frm" method="post" enctype="multipart/form-data" action="/HR/PostManage/SaveEdit?id=@(post.id)"

target="ifrm">

<div class="adminMainContent">

  <div class="box">

    <div class="box-title">

      基礎(chǔ)信息

    </div>

    <div class="box-content">

      <table cellpadding="0" cellspacing="0" class="detail" width="100%">

        <tr>

          <td class="title">

            <span class="mst">*</span>崗位名稱：

          </td>

          <td style="width: 35%;">

            <input type="text" class="xinxi_txt" name="postName" value="@post.postName" />

            <span class="valid" msg="必填，且長度不能超過50" rule="^(.|\n){0,50}$"></span>

          </td>

          <td class="title">

            <span class="mst">*</span>崗位編號：

          </td>

          <td style="width: 35%;">

            <input type="text" class="xinxi_txt" name="postCode" value="@post.postCode" />

            <span class="valid" msg="必填，且長度不能超過20" rule="^(.|\n){0,20}$" ajaxaction="/HR/PostManage/AjaxCheckPostCode?id=@post.id">

            </span>

          </td>

        </tr>

        <tr>

          <td class="title">

            <span class="mst">*</span> 所屬部門：

          </td>

          <td style="width: 35%;">

            <input type="text" name="depCode" id="dept" class="easyui-combotree" style="height: 30px;" />

          </td>

          <td class="title">

            <span class="mst">*</span>匯報對象：

          </td>

          <td style="width: 35%;">

            <select class="xueli" name="reportPostCode" id="agreementType">

              <option value="" selected="selected">==請選擇==</option>

              @foreach (sys_post item in postList)

              {

                if (item.postCode == post.reportPostCode)

                {

                <option value="@item.postCode" selected="selected">@item.postName</option>

                }

                else

                {

                <option value="@item.postCode">@item.postName</option>

                }

              }

            </select>

            <span class="valid" msg="請選擇合同分類">

          </td>

        </tr>

        <tr>

          <td class="title">

            <span class="mst">*</span>崗位級別：

          </td>

          <td style="width: 35%;">

            <select class="xueli" name="postLevel">

              <option value="" selected="selected">==請選擇==</option>

              <option value="1">1</option>

              <option value="2">2</option>

              <option value="3">3</option>

              <option value="4">4</option>

              <option value="5">5</option>

              <option value="6">6</option>

            </select>

            <span class="valid" msg="請選擇崗位級別">

          </td>

          <td class="title">

          </td>

          <td style="width: 35%;">

          </td>

        </tr>

        <tr>

          <td class="title">

            <span class="mst">*</span>備注：

          </td>

          <td colspan="3" style="width: 35%;">

            <textarea name="remarks" style="width: 500px;">@post.remarks</textarea>

            <span class="valid" msg="長度不得超過500" rule="^(.|\n){0,500}$"></span>

          </td>

        </tr>

      </table>

    </div>

  </div>

</div>

</form>

效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。