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-data的三种用法
Apr 18 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
jquery插件懒加载的示例
Oct 24 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使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
CCPry JS类库 代码
2009/10/30 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
python中xrange和range的区别
2014/05/13 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
2015年学雷锋活动总结
2015/02/06 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
python3.9之你应该知道的新特性详解
2021/04/29 Python
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python