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 ...
随机推荐
- 重学c#系列——对c#粗浅的认识(一)
前言 什么是c#呢? 首先你是如何读c#的呢?c sharp?或者c 井? 官方读法是:see sharp. 有没有发现开发多年,然后感觉名字不对. tip:为个人重新整理,如学习还是看官网,c# 文 ...
- Re5ilio 5ync:资源神器
文章目录 #0x0 简单的介绍 #0x1 安装使用 #0x10 下载 #0x11 安装 #0x12 升级pro权限 #0x13 开始添加资源 #0x14 后续 一定要小心哦!! #0x0 简单的介绍 ...
- Scala 面向对象(八):特质(接口) 一
1 Scala接口的介绍 从面向对象来看,接口并不属于面向对象的范畴,Scala是纯面向对象的语言,在Scala中,没有接口. Scala语言中,采用特质trait(特征)来代替接口的概念,也就是说, ...
- 数据可视化之分析篇(四)PowerBI分析模型:产品关联度分析
https://zhuanlan.zhihu.com/p/64510355 逛超市的时候,面对货架上琳琅满目的商品,你会觉得这些商品的摆放,或者不同品类的货架分布是随机排列的吗,当然不是. 应该都听说 ...
- picker-view、微信小程序自定义时间选择器(非官方)
picker-view自定义时间选择器 官网的自定义时间选择器比较简陋.日期不准 下面是我自己写的一个demo <view class="baseList"> < ...
- bzoj2843极地旅行社
bzoj2843极地旅行社 题意: 一些点,每个点有一个权值.有三种操作:点与点连边,单点修改权值,求两点之间路径上点的权值和(需要判输入是否合法) 题解: 以前一直想不通为什么神犇们的模板中LCT在 ...
- python基础算法
一.简介 定义和特征 定义:算法(Algorithm)是指解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代表着用系统的方法描述解决问题的策略机制.也就是说,能够对一定规范的输入,在有限时 ...
- 题解 CF 1372A
题目 传送门 题意 构造一个长度为n的数组,对于数组中的元素a,b,c,满足\(a+b\neq c\). 思路 直接让数组中的数全部变成1就可以了(其他数也行). 代码 /* * Author :We ...
- DJANGO-天天生鲜项目从0到1-005-FastDFS与Nginx打造自定义文件存储系统
本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...
- 【线性表基础】基于线性表的简单算法【Java版】
本文描述了基于线性表的简单算法及其代码[Java实现] 1-1 删除单链表中所有重复元素 // Example 1-1 删除单链表中所有重复元素 private static void removeR ...