jQuery轻量级表单模型验证插件

 更新时间:2018年10月15日 14:57:07   作者:沉迷代码的萌新  
这篇文章主要介绍了jQuery轻量级表单模型验证插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

JQuery插件,轻量级表单模型验证,供大家参考,具体内容如下

附上源码和Demo段

var validataForm = (function(model) {
  model.Key = "[data-required='true']";
  model.ElementList = new Array();
  model.FunctionDictionary = new Dictionary();
  model.ToastrCustom = function (msg) {
    alert(msg);
  }

  model.AddElement = function (name) {
    model.ElementList.push(name);
  };

  model.AddFunction = function (name, func) {
    model.FunctionDictionary.add(name, func);
  };

  model.Validata = function (formName) {
    for (var i = 0; i < model.ElementList.length; i++) {
      var thisObj = model.ElementList[i];
      var str = formName + " " + thisObj + model.Key;
      var elements = $(str);

      for (var j = 0; j < elements.length; j++) {
        var element = elements.eq(j);
        var value = element.val();

        var elementType = element.data().type;

        var func = model.FunctionDictionary.find(elementType);
        if (func) {
          var result = func(value, element);

          if (result.status) {
            var errorInfo = result.message;
            model.ToastrCustom(errorInfo);
            return;
          }
        }
      }
    }
  };

  model.ElementList.push("input");
  model.ElementList.push("select");
  model.FunctionDictionary.add("required", function (value, element) {
    var name = element.data().name;

    return {
      status: (value === ""),
      message: (value === "" && name + "不能为空")
    };
  });

  return model;
})(window.validataForm || {});

调用处

<form id="ValidataForm">
  <input data-required="true" data-name="名称" data-type="required" value="">
  <input data-required="true" data-name="昵称" data-type="hello">
  <button id="Send">提交</button>
</form>
<script src="~/js/plugs/jquery-3.3.1.js"></script>
<script src="~/js/Dictionary.js"></script>
<script src="~/js/ValidataForm.js"></script>
<script type="text/javascript">
  $("#Send").click(function () {
    validataForm.Validata("#ValidataForm");
  });
</script>

Dictionary这个对象是抄一个博主的
代码附上,内置链接

/* https://www.cnblogs.com/baiyangyuanzi/p/6689554.html */
/*字典 Dictionary类*/
function Dictionary() {
  this.add = add;
  this.datastore = new Array();
  this.find = find;
  this.remove = remove;
  this.count = count;
  this.clear = clear;
}

function add(key, value) {
  this.datastore[key] = value;
}

function find(key) {
  return this.datastore[key];
}

function remove(key) {
  delete this.datastore[key];
}

function count() {
  /*var ss = Object.keys(this.datastore).length;
  console.log("ssss  "+ss);
  return Object.keys(this.datastore).length;*/
  /**/
  var n = 0;
  for (var key in Object.keys(this.datastore)) {
    ++n;
  }
  return n;
}

function clear() {
  for (var key in this.datastore) {
    delete this.datastore[key];
  }
}

萌新初试前端,有写得不好的地方,望各位前辈,多多指教。

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

相关文章

  • jquery select操作的日期联动实现代码

    jquery select操作的日期联动实现代码

    是很简单的代码 不过我自己操作的时候才发现我自己还有很多不懂,要多实际应用才发现问题,哎~~
    2009-12-12
  • jQuery事件委托之Safari

    jQuery事件委托之Safari

    这篇文章主要介绍了jQuery事件委托之Safari 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • jQuery简单实现列表隐藏和显示效果示例

    jQuery简单实现列表隐藏和显示效果示例

    这篇文章主要介绍了jQuery简单实现列表隐藏和显示效果,结合实例形式分析了jQuery中slideToggle动态操作页面元素切换的相关技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery toggle()设置CSS样式

    jQuery toggle()设置CSS样式

    如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
    2009-11-11
  • jQuery 计算iframe 窗口大小的方法

    jQuery 计算iframe 窗口大小的方法

    这篇文章主要介绍了jQuery如何计算iframe窗口大小,需要的朋友可以参考下
    2014-05-05
  • jQuery使用DataTable实现删除数据后重新加载功能

    jQuery使用DataTable实现删除数据后重新加载功能

    利用jQuery Datatable和artTemplate组合来做的表格。但是当删除数据时,需要重新加载table里的数据。接下来通过本文给大家分享jQuery使用DataTable实现删除数据后重新加载功能,需要的朋友参考下
    2017-02-02
  • jQuery操作选中select下拉框的值代码实例

    jQuery操作选中select下拉框的值代码实例

    这篇文章主要介绍了jQuery操作选中select下拉框的值代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • jQuery 拖动层(在可视区域范围内)

    jQuery 拖动层(在可视区域范围内)

    获取层元素,在浏览器可视区域的最左、最边,最上、最下的值。并且在拖动层的过程中,把当前层的坐标值,去和这几个值,做比较,如果超过这些值。那么就不能再拖动这个方向,即把值设为最小或最大
    2012-05-05
  • 简单实现jQuery级联菜单

    简单实现jQuery级联菜单

    这篇文章主要为大家详细介绍了如何简单实现jQuery级联菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jQuery控制网页打印指定区域的方法

    jQuery控制网页打印指定区域的方法

    这篇文章主要介绍了jQuery控制网页打印指定区域的方法,涉及jQuery操作html元素的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04

最新评论