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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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日历制作代码分享
2014/01/20 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
stripos函数知识点实例分享
2019/02/11 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
javascript数组排序汇总
2015/07/07 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Vue实现日历小插件
2019/06/26 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python Celery多队列配置代码实例
2019/11/22 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
关于Python解包知识点总结
2020/05/05 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
日期和时间问题
2015/01/04 面试题
幼儿园庆六一游园活动方案
2014/01/29 职场文书
高三毕业寄语
2014/04/10 职场文书
大学军训的体会
2014/11/08 职场文书
北京故宫的导游词
2015/01/31 职场文书
2016年感恩节寄语
2015/12/07 职场文书
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL