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

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

  • 相关阅读:
    GIT → 04:Git与代码托管平台
    GIT → 03:Git的下载和安装
    GIT → 02:Git和Svn比较
    GIT → 01:学习版本控制的原因
    GIT → 00:GIT学习大纲
    GIT → 10:基于IntelliJ IDEA的Git 操作
    GIT → 11:Git 工作流与实战演练
    GIT → 09:TortoiseGit 图形化工具
    亚马逊服务器搭建pptp方法
    Safari获取UDID需要安装.mobileconfig文件,
  • 原文地址:https://www.cnblogs.com/NCoreCoder/p/9790936.html
Copyright © 2011-2022 走看看