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 24 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jquery自定义组件实例详解
Dec 31 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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
PHP实现验证码校验功能
2017/11/16 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Python中asyncore的用法实例
2014/09/29 Python
Python批量转换文件编码格式
2015/05/17 Python
Python中装饰器高级用法详解
2017/12/25 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
检察官就职演讲稿
2014/01/13 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
小学作文评语大全
2014/04/21 职场文书
英语教师自荐信
2014/05/26 职场文书
公司离职证明样本
2014/09/13 职场文书
市场部岗位职责范本
2015/04/15 职场文书
酒店前台岗位职责
2015/04/16 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python