JQuery外掛,輕量級表單模型驗證
阿新 • • 發佈:2018-11-12
附上原始碼和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]; } }
萌新初試前端,有寫得不好的地方,望各位前輩,多多指教