网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 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("<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>
      <input type="button" value="保存" onclick="save()" />
      <input type="button" value="返回" onclick="back()" />
    </div>
    <iframe id="ifrm" name="ifrm"></iframe>
    <form id="frm" method="post" enctype="multipart/form-data" action="/HR/PostManage/SaveEdit?id=@(post.id)"
    target="ifrm">
    <div>
      <div>
        <div>
          基础信息
        </div>
        <div>
          <table cellpadding="0" cellspacing="0">
            <tr>
              <td>
                <span>*</span>岗位名称：
              </td>
              <td>
                <input type="text" name="postName" value="@post.postName" />
                <span msg="必填，且长度不能超过50" rule="^(.|\n){0,50}$"></span>
              </td>
              <td>
                <span>*</span>岗位编号：
              </td>
              <td>
                <input type="text" name="postCode" value="@post.postCode" />
                <span msg="必填，且长度不能超过20" rule="^(.|\n){0,20}$" ajaxaction="/HR/PostManage/AjaxCheckPostCode?id=@post.id">
                </span>
              </td>
            </tr>
            <tr>
              <td>
                <span>*</span> 所属部门：
              </td>
              <td>
                <input type="text" name="depCode" id="dept" />
              </td>
              <td>
                <span>*</span>汇报对象：
              </td>
              <td>
                <select 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 msg="请选择合同分类">
              </td>
            </tr>
            <tr>
              <td>
                <span>*</span>岗位级别：
              </td>
              <td>
                <select 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 msg="请选择岗位级别">
              </td>
              <td>
              </td>
              <td>
              </td>
            </tr>
            <tr>
              <td>
                <span>*</span>备注：
              </td>
              <td colspan="3">
                <textarea name="remarks">@post.remarks</textarea>
                <span msg="长度不得超过500" rule="^(.|\n){0,500}$"></span>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    </form>
    效果图：
    名单
    以上就是本文的全部内容，希望对大家的学习有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 23:24:41