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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
基于JQuery实现页面定时弹出广告
May 08 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 读取文件内容代码(txt,js等)
2009/12/06 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
解析Python的缩进规则的使用
2019/01/16 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
感恩节活动方案
2014/01/27 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
现场施工员岗位职责
2015/04/11 职场文书
公司出差管理制度范本
2015/08/05 职场文书
Python基础之元类详解
2021/04/29 Python