JS melaksanakan pemalam borang yang menyokong kemahiran verification_javascript Ajax

Artikel ini berkongsi pemalam pengesahan borang untuk semua orang, yang menyokong pengesahan ajax dan sangat mudah digunakan.
Terdapat teg span di bawah setiap elemen borang yang perlu disahkan Kelas teg ini mempunyai sah yang bermaksud ia perlu disahkan bermaksud mesej ralat; kepada bermaksud elemen yang akan disahkan Nilai nama, jika elemen itu tunggal, tidak perlu ditulis. Pemalam ini akan merentasi setiap teg span yang sah untuk mencari elemen di hadapannya yang perlu disahkan dan mengesahkannya mengikut peraturan Jika pengesahan gagal, jidar paparan akan menjadi merah dan mesej ralat akan menjadi dipaparkan apabila tetikus diletakkan pada elemen.

Masa pengesahan: 1. Panggil kaedah pengesahan secara jelas apabila butang hantar diklik; 2. Sahkan apabila elemen mencetuskan kabur.

Kod pemalam:
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();
});

Cara menggunakan:
Edit halaman:

@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&#63;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&#63;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>

Rendering:

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.