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用noConflict代替$的实现方法
Apr 12 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jquery的$().each和$.each的区别
Jan 18 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读取excel文件的简单实例
2013/08/26 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
JavaScript Split()方法
2015/12/18 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
Python基础语法(Python基础知识点)
2016/02/28 Python
PyQt5每天必学之布局管理
2018/04/19 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
python实现三壶谜题的示例详解
2020/11/02 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
高三英语教学反思
2014/01/13 职场文书
初中语文教学反思
2014/02/02 职场文书
对标管理实施方案
2014/03/12 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
电影雷锋观后感
2015/06/10 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android