JS实现支持Ajax验证的表单插件


Posted in Javascript onMarch 24, 2016

本文为大家分享了一个表单验证插件,支持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>

效果图:

JS实现支持Ajax验证的表单插件

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
在视频前插入广告
Nov 20 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 #Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 #Javascript
js+css实现select的美化效果
Mar 24 #Javascript
基于jQuery Ajax实现上传文件
Mar 24 #Javascript
Angular.js如何从PHP读取后台数据
Mar 24 #Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 #Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 #Javascript
You might like
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
Python执行时间的计算方法小结
2017/03/17 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
小加工厂管理制度
2014/01/21 职场文书
上课看小说检讨书
2014/02/22 职场文书
音乐学专业求职信
2014/07/22 职场文书
房屋授权委托书范本
2014/10/07 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python