www.qjdy.com-奇迹赌场 > www.qjdy.com > 该插件会遍历每个有valid的span标签

原标题:该插件会遍历每个有valid的span标签

浏览次数:71 时间:2019-07-11

正文为大家大快朵颐了三个表单验证插件,协助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">
            *岗位名称:
          </td>
          <td style="width: 35%;">
            <input type="text" class="xinxi_txt" name="postName" value="@post.postName" />

          </td>
          <td class="title">
            *岗位编号:
          </td>
          <td style="width: 35%;">
            <input type="text" class="xinxi_txt" name="postCode" value="@post.postCode" />


          </td>
        </tr>
        <tr>
          <td class="title">
            * 所属部门:
          </td>
          <td style="width: 35%;">
            <input type="text" name="depCode" id="dept" class="easyui-combotree" style="height: 30px;" />
          </td>
          <td class="title">
            *汇报对象:
          </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>

          </td>
        </tr>
        <tr>
          <td class="title">
            *岗位级别:
          </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>

          </td>
          <td class="title">
          </td>
          <td style="width: 35%;">
          </td>
        </tr>
        <tr>
          <td class="title">
            *备注:
          </td>
          <td colspan="3" style="width: 35%;">
            <textarea name="remarks" style="width: 500px;">@post.remarks</textarea>

          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
</form>

效果图:

图片 1

如上便是本文的全体内容,希望对我们的上学抱有协理。

你或然感兴趣的稿子:

  • html5 javascript制作轻易画板附图
  • 纯js网页画板(Graphics)类简单介绍及贯彻代码
  • 用javascript实现画板的代码
  • 全屏js头像上传插件源码高清版
  • JavaScript开辟者必备的11个Sublime Text插件
  • 读书使用jquery iScroll.js移动端滚动条插件
  • JavaScript tab选项卡插件实例代码
  • 享用小编对JS插件开辟的有的感想和心得
  • JavaScript SweetAlert插件完毕超酷音讯警告框
  • JS基于ocanvas插件达成的简易画板效果代码(附demo源码下载)

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:该插件会遍历每个有valid的span标签

关键词: mg4155娱乐

上一篇:你需要学习Nodejs中几个比较重要的模块

下一篇:没有了