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 tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现弹幕特效
Nov 29 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提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
React组件refs的使用详解
2018/02/09 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
python eventlet绿化和patch原理
2020/11/21 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
幼儿园中秋节活动反思
2014/02/16 职场文书
学习型党组织心得体会
2014/09/12 职场文书
五好家庭事迹材料
2014/12/20 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android
python turtle绘图命令及案例
2021/11/23 Python