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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 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操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php笔记之:AOP的应用
2013/04/24 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
opencv实现简单人脸识别
2021/02/19 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
linux系统都有哪些运行级别
2016/03/26 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
收银员岗位职责
2015/02/03 职场文书
司机个人年终总结
2015/03/03 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python