这篇文章将为大家详细讲解有关jQuery中轻量级表单模型验证插件的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
JQuery插件，轻量级表单模型验证，供大家参考，具体内容如下
计算
安全
数据库
网络和加速
企业服务
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中轻量级表单模型验证插件的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「轻量应用服务器」，开箱即用、面向轻量应用场景，一站式融合常用基础云服务与热门开源软件，一键构建应用，上手更加简单便捷，价格只需23元/月！点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
