jQuery轻量级表单模型验证插件
(编辑:jimmy 日期: 2025/10/24 浏览:3 次 )
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="/UploadFiles/2021-04-02/jquery-3.3.1.js">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]; } }萌新初试前端,有写得不好的地方,望各位前辈,多多指教。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:详解ESLint在Vue中的使用小结