JS實現支援Ajax驗證的表單外掛程式_javascript技巧

本文為大家分享了一個表單驗證外掛程式，支援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("<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)");      }    });    //操作結果    $("#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">      基礎資訊    </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>

效果圖：

以上就是本文的全部內容，希望對大家的學習有所協助。