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实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
JQuery表单元素取值赋值方法总结
May 12 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 中执行系统外部命令
2006/10/09 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
解决laravel session失效的问题
2019/10/14 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
Prototype Array对象 学习
2009/07/19 Javascript
javascript基本类型详解
2014/11/28 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
python开发之函数定义实例分析
2015/11/12 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
scrapy-splash简单使用详解
2021/02/21 Python
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
生日宴会主持词
2014/03/20 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
店铺转让协议书
2014/12/02 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
一年级语文教学随笔
2015/08/14 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android