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插件,轻量级表单模型验证(续 二)
好不容易,有心思,那就把没做完的JQuery轻量级表单验证做完吧 之前做到了空参数验证的,现在增加带参数的验证. 附上html <form id="ValidataForm" ...
- JQuery插件,轻量级表单模型验证(续 一)
之前的代码结构,不方便扩展多结构的模型验证 重新结构设计了一下验证模型核心 var validateForm = (function(model) { model.Key = "[data- ...
- 自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
- Jquery插件easyUi表单验证提交
<form id="myForm" method="post"> <table align="center" style= ...
- MVC遇上bootstrap后的ajax表单模型验证
MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...
- jQuery插件 -- Form表单插件jquery.form.js<转>
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...
- (转)jQuery插件 -- Form表单插件jquery.form.js
beforeSubmit: validate function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来 ...
- jQuery插件 -- Form表单插件jquery.form.js
http://blog.csdn.net/zzq58157383/article/details/7718956 http://my.oschina.net/i33/blog/77250
- 表单验证代码实例:jquery.validate.js表单验证插件
jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...
随机推荐
- 阐述Fetch.ai的能源市场优化
原文链接:https://fetch.ai/explaining-fetch-ais-energy-market-optimization/ 阐述Fetch.ai的能源市场优化 2019年11月4日 ...
- day11 文件操作(上)
目录 一.什么是文件 二.为何要用文件 三.如何使用文件 3.1文件操作的基本流程 3.2资源回收with上下文管理 3.3指定操作文本的字符编码 四.文件的操作模式 4.1控制文件读写操作的模式(t ...
- 读《大话设计模式》——应用工厂模式的"商场收银系统"(WinForm)
要做的是一个商场收银软件,营业员根据客户购买商品单价和数量,向客户收费.两个文本框,输入单价和数量,再用个列表框来记录商品的合计,最终用一个按钮来算出总额就可以了,还需要一个重置按钮来重新开始. 核心 ...
- 数据可视化之PowerQuery篇(十九)PowerBI数据分析实践第三弹 | 趋势分析法
https://zhuanlan.zhihu.com/p/133484654 本文为星球嘉宾"海艳"的PowerBI数据分析工作实践系列分享之三,她深入浅出的介绍了PowerBI ...
- 有效提高java编程安全性的12条黄金法则
安全性是软件开发中最复杂,最广泛和最重要的考量之一.Java是具有许多内置安全性功能的开发平台,java在长期的发展过程中,已经经过了很多高强度的安全测试,并经常更新安全漏洞.并且Java生态系统还包 ...
- vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装
相信大家在做前后端数据交互的时候都会给请求做一些简单的封装就像之前封装ajax方法一样axios的封装也是一样的简单下面这个就是封装的axios的方法,require.js import axios ...
- 04-Python函数
一.简介 函数是可重用的程序代码块.函数的作用,不仅可以实现代码的复用,更能实现代码的一致性.一致性指的是,只要修改函数的代码,则所有调用该函数的地方都能得到体现. 函数用关键字def来定义,def关 ...
- 关于JS深拷贝和浅拷贝
最近在前端开发中遇到一些问题,就是数组中的某个对象或某个对象的值改变之后,在不刷新页面的时候需要重新渲染值时,页面显示的还是原来的数据.比如: data{ A:[{id:1,num:1},{id:2, ...
- 将python3打包成为exe可执行文件(pyinstaller)
我们工作中可能会遇到,客户需要一个爬虫或者其他什么功能的python脚本. 这个时候,如果我们直接把我们的python脚本发给客户,会有两个问题: 1.客户的电脑或者服务器可能并没有安装python环 ...
- day1 python计算器底层运作,注释及变量
每日一记 utf-8 国际标准编码(可变长的unicode编码)中文3字节,英文数字特殊字符1字节 gbk 中国标准编码 中文2字节,英文数字特殊字符1字节 1.原码,反码,补码 "&quo ...