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实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
Jquery Fade用法详解
Nov 06 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 OPCode缓存 APC详细介绍
2010/10/12 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
跟老齐学Python之一个免费的实验室
2014/09/14 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
Python实现图片添加文字
2019/11/26 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
老公保证书范文
2014/04/29 职场文书
开票证明
2015/06/23 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android