自己动手写javascript前端验证框架

浏览数：68 / 时间：2015年06月09日

前段时间做网站需要很多的验证，第一时间想到的是去网上找一些验证控件。一搜还真不少，但是很沮丧，网上大多数验证控件都自带样式，而客户的验证提醒方式很特别。一怒之下小编自己写了一个简易的验证框架。

需求分析：

逻辑与页面设计相分离，网页设计师现在都疯了，各种花哨的提醒方式，好多验证控件却自认为自己做的样式可以得到设计师的芳心。。。
支持自定义正则与常用正则
支持提醒文本标记记住我们的控件的唯一功能就是验证，UI神马的要给用户自由选择权，自然也包含提醒文本
支持控件值比较
支持多种控件 text checkbox 等
支持忽略值例如请输入姓名之类的提示符号

页面结构

jquery类库这个是基础适合做精细化dom操作

<script src="jquery.js"/>

验证引擎，这是核心的js文件随意起一个名字吧 validate.js

<script src="validate.js"/>

提醒框文件，用于实现设计师的设计就叫 validateBox.js

<script src="validateBox.js"/>

在实现具体代码之前，我们应该先设计我们的代码如何工作。

第一种应用场景HTML代码：必选项

<input type="text" spacemsg="请输入用户名" class="userCtr">

这是最简单应用场景，spacemsg 为自定义标记（也可以称为编译指令）告诉验证引擎如果这个控件的值如果为空或长空格则提取spacemsg内容到提醒队列。

第二种应用场景HTML代码：格式化文本+必选验证

<input type="text" spacemsg="请输入年龄"  rule="\\d+$" rulemsg="年龄必须为数字" class="userCtr"/>

大家看到在这里我们使用 rule标记内容的格式验证已经格式验证提醒文本，必填验证优先级>格式验证

大家看到这里的正则我们可以自由填写，但是无法达到重用的效果所以我们也要支持格式类型

<input type="text" spacemsg="请输入邮箱"  ruleMod="email" rulemsg="请输入正确的邮箱格式" class="userCtr"/>

在工作的时候引擎会将ruleMod 转为对应的rule，在用法上这只不过是语法糖而已但对用户来讲方便不少哦

有些验证只有当控件有值的时候才会引发验证，那么只需要

<input type="text"   ruleMod="mobile" rulemsg="请输入正确的联系方式" class="userCtr"/>

------------------------昨天有事没有更新，今天先把代码给你们贴上来，博主不是标题党 :‘(-------------------------------

validate.js

if (!String.prototype.replaceAll) {
    String.prototype.replaceAll = function (str1, str2) {
        if (str1 == "\\") {
            if (this.indexOf("\\") == -1) {
                return this;
            }
            var newstr = "";
            for (var i = 0; i < this.length; i++) {
                if (this[i] == "\\") {
                    newstr += str2;
                } else {
                    newstr += this[i];
                }
            }
            return newstr;
        }

        var exp = eval(‘( /‘ + str1 + ‘/g )‘);
        return this.replace(exp, str2);
    };
}
(function ($) {

    var textCheckFucntion = function (E_this, spaceAttr, ruleAttr, ruleMessageAttr, ruleElement, ruleMod, richMessage, success, isArguments) {
        var _this = $(E_this);
        var t = _this.val();
        if ($.trim(t).length === 0) {

            if (isArguments) {
                if (spaceAttr) {
                    if (_this.attr(spaceAttr)) {
                        richMessage.push({ "element": _this, "message": _this.attr(spaceAttr) });
                    }
                }
            } else {
                success = success && false;
            }
        } else {
            if (isArguments) {
                if (ruleAttr) {
                    if (_this.attr(ruleElement)) {
                        if (t != $(_this.attr(ruleElement)).val()) {
                            richMessage.push({ "element": _this, "message": _this.attr(ruleMessageAttr) });
                        }

                    } else {
                        var ruleStr = _this.attr(ruleAttr);
                        if (ruleStr) {
                            var rule = new RegExp(ruleStr);
                            if (!rule.test(t)) {
                                richMessage.push({ "element": _this, "message": _this.attr(ruleMessageAttr) });
                            }
                        } else {
                            if (_this.data(ruleMod)) {
                                var rulem = _this.data(ruleMod);
                                if (!rulem.test(t)) {
                                    richMessage.push({ "element": _this, "message": _this.attr(ruleMessageAttr) });
                                }
                            }
                        }
                    }
                }
            }

        }

    }
   

    $.fn.extend({
        //检查必填项支持 input checkbox  textarea  password  hidden
        requiredCheck: function (setting) {
            var spaceAttr, ruleAttr, ruleMessageAttr, ruleElement,ruleMod;
            if (setting) {
                spaceAttr = setting["spaceMessage"];
                ruleAttr = setting["rule"];
                ruleMessageAttr = setting["ruleMessage"];
                ruleElement = setting["ruleElement"];
                ruleMod=setting["ruleMod"];
            }
            var richMessage = [];
            var isArguments = arguments.length === 0 ? false : true;
            var success = true;
            var $textinputCollection = this.filter("[type=text]");
            //没有type属性则按 input type="text"处理
            var $notType = this.filter("input").not("[type]");
            if ($notType.length) {
                $textinputCollection.push($notType);
            }          
            var $checkboxCollection = this.filter("[type=checkbox]");
            var $textAreaCollection = this.filter("textarea");
            var $passwordCollection = this.filter("[type=password]");
            var $hiddenCollection = this.filter("[type=hidden]");
            var textDege = function (E_this) {
                textCheckFucntion(E_this, spaceAttr, ruleAttr, ruleMessageAttr, ruleElement, ruleMod, richMessage, success, isArguments);
            }
            if ($textinputCollection.length) {
                $textinputCollection.each(function () {                  
                    textDege(this);
                });
            }           
            if ($textAreaCollection.length) {
                $textAreaCollection.each(function () {
                    textDege(this);
                });
            }
            if ($passwordCollection.length) {
                $passwordCollection.each(function () {
                    textDege(this);
                });
            }
            if ($hiddenCollection.length) {
                $hiddenCollection.each(function () {
                    textDege(this);
                });
            }
            if ($checkboxCollection.length) {
                $checkboxCollection.each(function () {
                    var _this = $(this);
                    if (!_this.get(0).checked) {
                        if (isArguments) {
                            if (spaceAttr) {
                                richMessage.push({ "element": _this, "message": _this.attr(spaceAttr) });
                            }
                        } else {
                            success = success && false;
                        }
                    }

                });

            }
            if (richMessage.length) {
                return richMessage;
            } else {
                return success;
            }
        }    });})(jQuery);

validateBox.js

(function ($) {
    if ($.fn.requiredCheck) {
        var setting = {
            "spaceMessage": "spacemsg",
            "rule": "rule",
            "ruleMessage": "spacemsg",
            "ruleElement": "confirmElement",
            "ruleMod": "ruleMod"
        };
        var rgModel = {
            "email": "^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$",
            "mobile": "^1[3458]\\d{9}$",
            "natureNumber": "^\\d+$"
        };
        this.CommonVaildate = function (selector, errorhandler) {
            var $selector = $(selector);
            $selector.each(function () {
                var _thisRuleMod = $(this).attr("rulemod");
                if (_thisRuleMod) {
                    var frxp = rgModel[_thisRuleMod];
                    if (frxp) {
                        $(this).data("ruleMod", new RegExp(frxp));
                    }
                }
            });
            var res = $selector.requiredCheck(setting);
            var handler = errorhandler || alert;
            var msg = [];
            if (res.join) {               
                for (var i = 0; i < res.length; i++) {
                    msg.push(res[i]["message"]);
                }
                handler(msg.join("\n"));
                msg = null;
                return false;
            }
            msg = null;
            return true;
        }
    } else {
        this.CommonVaildate = function () {
            throw Error("请引用jquery.enterprise.js");
        };
    }

}).apply(window, [jQuery]);

测试HTML

<input type="text" spacemsg="请输入邮箱"  ruleMod="email" rulemsg="请输入正确的邮箱格式" class="userCtr"/>
<script>
var result=CommonVaildate(".userCtr");
<script>

----------------------------后续篇章将详细解释源代码博主上班去喽-----------------

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

自己动手写javascript前端验证框架

标签：代码 text word js 网站 select 框架用法样式 hand 代码 text word js 网站 select 框架用法样式 hand

自己动手写javascript前端验证框架

相关文章

随机文章

您可能还喜欢

您可能还喜欢

最新图文

您可能还喜欢

您可能还喜欢

文摘排行

文章排行

推荐文章

图文排行

推荐图文