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


Posted in jQuery onOctober 15, 2018

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 相关文章推荐
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 #jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 #jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 #jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
学习jQuery中的noConflict()用法
Sep 28 #jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 #jQuery
jQuery pjax 应用简单示例
Sep 20 #jQuery
You might like
php与php MySQL 之间的关系
2009/07/17 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python实现图片处理和特征提取详解
2017/11/13 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
学生爱国演讲稿
2014/01/14 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
工程资料员岗位职责
2015/04/13 职场文书
奠基仪式致辞
2015/07/30 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
业余无线电通联Q语
2022/02/18 无线电
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python