JQuery插件，轻量级表单模型验证（续 一）

之前的代码结构，不方便扩展多结构的模型验证

重新结构设计了一下验证模型核心

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 (splitStrs.indexOf(":") > -1) {
                                var params = splitStr.split(":");

                                var func = model.FunctionDictionary.find(params.eq(0));
                                if (func) {
                                    var result = func(value, element);

                                    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 || {});

扩展了多验证方式，用“|”分隔

在Dictionary类扩展了一个方法

function contains(key) {
    var keys = Object.keys(this.datastore);
    for (var index in keys) {
        if (keys[index].indexOf(key) > -1)
        {
            return true
        }        
    }

    return false;
}

this.contains = contains;

方便查找是否包含Key

写了一个ValidateExtension.js

之前手误的Validata统一改为Validate

ValidateExtension.js内代码如下

validateForm.AddFunction("GreaterThanNow", function (value, element) {
    var name = element.data().name;
    try {
        var date = value;
        date = date.substring(0, 19);
        date = date.replace(/-/g, '/');
        var valueDate = new Date(date);
        var now = new Date();

        var check = (now > valueDate);
        return {
            status: check,
            message: (check && name + "不能为小于当前日期")
        };
    } catch (error) {
        console.log(error);
        return {
            status: false,
            message: error.message
        };
    }
});

附上测试例子

<form id="ValidataForm">
    <input data-required="true" data-name="名称" data-type="required" value="">
    <input data-required="true" data-name="昵称" data-type="hello">
    <input data-required="true" data-name="日期" data-type="required|GreaterThanNow" type="date">
    <button id="Send">提交</button>
</form>
<script src="~/js/plugs/jquery-3.3.1.js"></script>
<script src="~/js/Dictionary.js"></script>
<script src="~/js/ValidateForm.js"></script>
<script src="~/js/ValidateExtension.js"></script>
<script type="text/javascript">
    $("#Send").click(function () {
        validateForm.Validate("#ValidataForm");
    });
</script>