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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery zTree树插件的使用教程
Aug 16 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函数的方法
2013/11/13 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
jquery实现简单的全选和反选功能
2016/01/02 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
使用Python下载Bing图片(代码)
2013/11/07 Python
Python扩展内置类型详解
2018/03/26 Python
pandas重新生成索引的方法
2018/11/06 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
python如何实现word批量转HTML
2020/09/30 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
2014年六一儿童节演讲稿
2014/05/23 职场文书
成本会计实训报告
2014/11/05 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
python实现局部图像放大
2021/11/17 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏