本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件，这篇文章没有教你怎么用 validate plugin。我们的重点在学习一些jQuery，Javascript面向对象编程的知识。

下面是一个完整的html页面代码，可以直接运行测试的。

<html>

<head>
<title>jQuery用面向对象的思想来编写验证表单的插件</title>

<style type="text/css">

form {margin:2em 0;}
input {font-family:sans-serif; font-size:1.4em; padding:4px;}
label {display: block; margin-bottom:2px; font-size:1.4em;}
fieldset input {width: 225px; margin-bottom: 5px;}
legend {font-weight:bold; font-size:1.4em;}
fieldset { padding:2em; border: 1px solid #ccc;}
input[type=submit] {margin-top:0.5em;}

.error input {border:1px solid red;}
.errorlist {margin:0; color: red; margin-bottom:10px;}

#valid-form {margin:5px 0; display: block; color:green;}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<script type="text/javascript">

(function($) {
    /*
    Validation Singleton
    */
    var Validation = function() {
        
        var rules = {
            
            email : {
               check: function(value) {
                   
                   if(value)
                       return testPattern(value,"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])");
                   return true;
               },
               msg : "Enter a valid e-mail address."
            },
            url : {

check : function(value) {

if(value)
                       return testPattern(value,"^https?://(.+\.)+.{2,4}(/.*)?$");
                   return true;
               },
               msg : "Enter a valid URL."
            },
            required : {
                
               check: function(value) {

if(value)
                       return true;
                   else
                       return false;
               },
               msg : "This field is required."
            }
        }
        var testPattern = function(value, pattern) {

var regExp = new RegExp(pattern,"");
            return regExp.test(value);
        }
        return {
            
            addRule : function(name, rule) {

rules[name] = rule;
            },
            getRule : function(name) {

return rules[name];
            }
        }
    }
    
    /* 
    Form factory 
    */
    var Form = function(form) {
        
        var fields = [];
    
        form.find("[validation]").each(function() {
            var field = $(this);
            if(field.attr('validation') !== undefined) {
                fields.push(new Field(field));
            }
        });
        this.fields = fields;
    }
    Form.prototype = {
        validate : function() {

for(field in this.fields) {
                
                this.fields[field].validate();
            }
        },
        isValid : function() {
            
            for(field in this.fields) {
                
                if(!this.fields[field].valid) {
            
                    this.fields[field].field.focus();
                    return false;
                }
            }
            return true;
        }
    }
    
    /* 
    Field factory 
    */
    var Field = function(field) {

this.field = field;
        this.valid = false;
        this.attach("change");
    }
    Field.prototype = {
        
        attach : function(event) {
        
            var obj = this;
            if(event == "change") {
                obj.field.bind("change",function() {
                    return obj.validate();
                });
            }
            if(event == "keyup") {
                obj.field.bind("keyup",function(e) {
                    return obj.validate();
                });
            }
        },
        validate : function() {
            
            var obj = this,
                field = obj.field,
                errorClass = "errorlist",
                errorlist = $(document.createElement("ul")).addClass(errorClass),
                types = field.attr("validation").split(" "),
                container = field.parent(),
                errors = []; 
            
            field.next(".errorlist").remove();
            for (var type in types) {

var rule = $.Validation.getRule(types[type]);
                if(!rule.check(field.val())) {

container.addClass("error");
                    errors.push(rule.msg);
                }
            }
            if(errors.length) {

obj.field.unbind("keyup")
                obj.attach("keyup");
                field.after(errorlist.empty());
                for(error in errors) {
                
                    errorlist.append("<li>"+ errors[error] +"</li>");        
                }
                obj.valid = false;
            } 
            else {
                errorlist.remove();
                container.removeClass("error");
                obj.valid = true;
            }
        }
    }
    
    /*
    Validation extends jQuery prototype
    */
    $.extend($.fn, {
        
        validation : function() {
            
            var validator = new Form($(this));
            $.data($(this)[0], 'validator', validator);
            
            $(this).bind("submit", function(e) {
                validator.validate();
                if(!validator.isValid()) {
                    e.preventDefault();
                }
            });
        },
        validate : function() {
            
            var validator = $.data($(this)[0], 'validator');
            validator.validate();
            return validator.isValid();
            
        }
    });
    $.Validation = new Validation();
})(jQuery);

</script>

<script>
                    
                    
$(function(){ // jQuery DOM ready function.

var myForm = $("#demo-form");

myForm.validation();

// We can check if the form is valid on
    // demand, using our validate function.
    $("#btn_submit").click(function() {

if(!myForm.validate()) {

myForm.append("<strong id='valid-form'>Form is valid!</strong>");
        }
    });
    
                    
});
 </script>
 
 
</head>
<body>
    
    <div class="wapper">
        <div class="content">
             <h2>Demo</h2><div class="article-demo">
                <form action="#demo-form" id="demo-form"> 
                    <fieldset>
                        <legend>Test fields</legend>
                        <div>
                            <label for="demo-field-1">Required field</label>
                            <input id="demo-field-1" validation="required" name="demo-field-1" type="text" />
                        </div>
                        <div>
                            <label for="demo-field-2">Email field</label>
                            <input id="demo-field-2" validation="email" name="demo-field-2" type="text" />
                        </div>
                        <div>
                            <label for="demo-field-3">URL field</label>
                            <input id="demo-field-3" validation="url" name="demo-field-3" type="text" />
                        </div>
                    </fieldset>
                    <div class="submit-area">
                        <input value="Validate!" type="submit" id="btn_submit" />
                    </div>  
                </form>
        </div>
    </div>
</body>

jQuery用面向对象的思想来编写验证表单的插件的更多相关文章

  1. ValidForm验证表单

    在做项目时,要求熟悉项目中验证表单的插件,所以学习一下validForm这个插件 http://validform.rjboy.cn/document.html#validformObject

  2. jquery.validate 使用--验证表单隐藏域

    jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...

  3. MVC4中 jquery validate 不用submit方式验证表单或单个元素

    正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...

  4. 运用jQuery写的验证表单

    //运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. MVC中 jquery validate 不用submit方式验证表单或单个元素

    <script src="/Scripts/jquery-1.4.4.js"></script> <script src="/Scripts ...

  6. jquery.validate验证表单

    添加引用 <script src="/${appName}/commons/js/validate/jquery.validate.min.js"></scrip ...

  7. 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  8. JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等

    JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  9. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

随机推荐

  1. 这套完美的Java环境安装教程，完整，详细，清晰可观，让你一目了然，简单易懂。⊙﹏⊙

    JDK下载与安装教程 2017年06月18日 22:53:16 Danishlyy1995 阅读数:349980  版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  2. ubuntu16.04(64位)建立交叉编译环境，并配置编译内核

    安装步骤 1.准备工具安装目录 将压缩包gcc-linaro-arm-linux-bnueabihf-4.9-2014.07_linux.tar存放在一个目录下,这个目录就是你等会解压缩的目录,以后这 ...

  3. 说一说Servlet的生命周期

    servlet有良好的生存期的定义,包括加载和实例化.初始化.处理请求以及服务结束.这个生存期由javax.servlet.Servlet接口的init,service和destroy方法表达. Se ...

  4. iOS Sprite Kit教程之滚动场景

    iOS Sprite Kit教程之滚动场景 滚动场景 在很多的游戏中,场景都不是静止的,而是滚动的,如在植物大战僵尸的游戏中,它的场景如图2.26所示. 图2.26  植物大战僵尸 在图2.26中,用 ...

  5. 机器学习之路：python 网格搜索 并行搜索 GridSearchCV 模型检验方法

    git:https://github.com/linyi0604/MachineLearning 如何确定一个模型应该使用哪种参数? k折交叉验证: 将样本分成k份 每次取其中一份做测试数据 其他做训 ...

  6. 凡信（超仿微信Android版）开源了，内有源码下载 -

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 凡信(超仿微信Android版)开源了,内有源码下载 - IM Geek开发者社区-移动 ...

  7. 【数论】Codeforces Round #483 (Div. 2) [Thanks, Botan Investments and Victor Shaburov!] C. Finite or not?

    题意:给你一个分数,问你在b进制下能否化成有限小数. 条件:p/q假如已是既约分数,那么如果q的质因数分解集合是b的子集,就可以化成有限小数,否则不能. 参见代码:反复从q中除去b和q的公因子部分,并 ...

  8. 【扩展欧几里得】codevs1200-同余方程

    [题目大意] 求关于 x 同余方程 ax ≡ 1 (mod b)的最小正整数解. [思路] 求解ax+by=1,只要x<0就不断加上 b. #include<iostream> #i ...

  9. [SPOJ-LCS]Longest Common Substring

    题目大意: 求两个字符串的LCS. 思路: 对其中一个字符串构建SAM,然后用另一个字符串在里面匹配,按照SAM的边一直往下走,匹配到的连续的字符数就是公共字串的长度. #include<str ...

  10. Codeforces Round #257 (Div. 2) C. Jzzhu and Chocolate

    C. Jzzhu and Chocolate time limit per test 1 second memory limit per test 256 megabytes input standa ...