最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

jQuery轻量级表单模型验证插件

来源:懂视网 责编:小采 时间:2020-11-27 22:06:16
文档

jQuery轻量级表单模型验证插件

jQuery轻量级表单模型验证插件:JQuery插件,轻量级表单模型验证,供大家参考,具体内容如下 附上源码和Demo段 var validataForm = (function(model) { model.Key = [data-required='true']; model.ElementList = new Array(); model.Func
推荐度:
导读jQuery轻量级表单模型验证插件:JQuery插件,轻量级表单模型验证,供大家参考,具体内容如下 附上源码和Demo段 var validataForm = (function(model) { model.Key = [data-required='true']; model.ElementList = new Array(); model.Func

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];
 }
}

萌新初试前端,有写得不好的地方,望各位前辈,多多指教。

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

jQuery轻量级表单模型验证插件

jQuery轻量级表单模型验证插件:JQuery插件,轻量级表单模型验证,供大家参考,具体内容如下 附上源码和Demo段 var validataForm = (function(model) { model.Key = [data-required='true']; model.ElementList = new Array(); model.Func
推荐度:
标签: 轻量级 jQuery form
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top