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插件imgAreaSelect基础讲解
May 26 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 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
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
鼠标图片振动代码
2006/07/06 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
python 使用get_argument获取url query参数
2017/04/28 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
《伯牙绝弦》教学反思
2014/03/02 职场文书
捐款倡议书
2014/04/14 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
法律专业自荐信
2014/06/03 职场文书
优秀员工评优方案
2014/06/13 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
python如何获取网络数据
2021/04/11 Python
Redis 配置文件重要属性的具体使用
2021/05/20 Redis