zoukankan      html  css  js  c++  java
  • 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="~/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];
        }
    }

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

  • 相关阅读:
    VBScript学习笔记
    C#调用C++库知识点
    .Net面试经验,从北京到杭州
    杭州.Net 相关大公司,希望对大家有帮助
    一起学习《C#高级编程》3--运算符重载
    一起学习《C#高级编程》2--比较对象的相等性
    一起学习《C#高级编程》1--类型的安全性
    博客园的第一天
    基于SpringCloud+Kubernetes 微服务的容器化持续交付实战
    第一节:Docker学习 — 安装
  • 原文地址:https://www.cnblogs.com/NCoreCoder/p/9790936.html
Copyright © 2011-2022 走看看