jQuery轻量级表单模型验证插件
时间:2018-10-15
这篇文章主要介绍了jQuery轻量级表单模型验证插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
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]; } }
萌新初试前端,有写得不好的地方,望各位前辈,多多指教。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- MyBatis Generator自动创建代码
- Maven(六)之依赖管理
- 细说log4j
- SEVERE: Error configuring application listener of class org.springframework.web.context.ContextLoade
- TCP/IP(一)之开启计算机网络之路
- JSON入门指南--客户端处理JSON
- mysql5.7 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)
- TCP/IP中你不得不知的十大秘密
- Java Web开发学习之路2012版
- TortoiseSVN客户端使用的2个配置问题
- JavaWeb(二)会话管理之细说cookie与session
- 概率论09 期望
- Javascript中数组的sort()和reverse()方法
- CentOS6.5开放端口,配置防火墙
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android-Jetpack笔记-DataBinding
- Android-Jetpack笔记-Lifecycles
- Android-Jetpack笔记-LiveData
- Android-Jetpack笔记-ViewModelSavedState
- Android-Jetpack笔记-ViewModel
- GitLab CE 安装记录
- SparkSQL中产生笛卡尔积的几种典型场景以及处理策略
- TypeScript 中的 export 和 import
- Angular2 初体验
- 在 Ubuntu 系统上配置 Nginx Git 服务器
- 设计模式之规格模式
- Android-Jetpack笔记-Navigation之Fragment使用
- Android-Jetpack笔记-Navigation之Fragment支持复用
- Android-Jetpack笔记-Room
- 代理模式看这一篇就够了~