JQuery插件,轻量级表单模型验证

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

调用处

@{
    ViewData["Title"] = "Home Page";
    Layout = null;
}

<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];
    }
}

萌新初试前端,有写得不好的地方,望各位前辈,多多指教

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值