好不容易，有心思，那就把沒(méi)做完的JQuery輕量級(jí)表單驗(yàn)證做完吧

之前做到了空參數(shù)驗(yàn)證的，現(xiàn)在增加帶參數(shù)的驗(yàn)證。

附上html

<form id="ValidataForm"><input type="number" data-required="true" data-name="數(shù)字范圍" data-type="required|Range:10,15" value=""><button id="Send">提交</button>
</form>

一個(gè)很常見(jiàn)的輸入框，輸入框是數(shù)字類型，必填，范圍是10到15之間

之前框架的實(shí)現(xiàn)修改了一下，原來(lái)eq是JQuery對(duì)象，JavaScript自帶的Array是沒(méi)有eq方法的，改了一通，代碼附上

var validateForm = (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.Validate = 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;if (elementType.indexOf("|") > -1) {var splitStrs = elementType.split("|");for (var index in splitStrs) {var splitStr = splitStrs[index];var find = model.FunctionDictionary.contains(splitStr);if (find) {if (splitStr.indexOf(":") > -1) {var params = splitStr.split(":");var func = model.FunctionDictionary.find(params[0]);if (func) {var result = func(value, element, params[1]);if (result.status) {var errorInfo = result.message;model.ToastrCustom(errorInfo);return;}}}else {var func = model.FunctionDictionary.find(splitStr);if (func) {var result = func(value, element);if (result.status) {var errorInfo = result.message;model.ToastrCustom(errorInfo);return;}}}}}}else {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.validateForm || {});

擴(kuò)展了一個(gè)方法

validateForm.AddFunction("Range", function (value, element, params) {var name = element.data().name;try {var items = params.split(",");if (items.length != 2) {return {status: false,message: name + " 驗(yàn)證格式不對(duì)"};}var min = new Number(items[0]);var max = new Number(items[1]);var valueNum = new Number(value);var check = (min < max) && (min < valueNum && valueNum < max);return {status: check,message: (check && name + " 范圍不對(duì)")};} catch (error) {console.log(error);return {status: false,message: error.message};}
});

?

轉(zhuǎn)載于:https://www.cnblogs.com/NCoreCoder/p/9838847.html

總結(jié)

以上是生活随笔為你收集整理的JQuery插件，轻量级表单模型验证（续 二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。