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操作DOM_动力节点Java学院整理
Jul 04 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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自动适应范围的分页代码
2008/08/05 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
jQuery1.6 使用方法二
2011/11/23 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
js函数排序的实例代码
2013/07/01 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python和c语言的主要区别总结
2019/07/07 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
新学期班主任寄语
2014/01/18 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
工程质量承诺书
2014/03/27 职场文书
《泉水》教学反思
2014/04/11 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
家装业务员岗位职责
2015/04/03 职场文书
机器人总动员观后感
2015/06/09 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript