jQuery用面向對象的思想來編寫驗證表單的插件

下面是一個完整的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>");
        }
    });
            www.aiwalls.com
                   
});
 </script>
 
 
</head>
<body>
   
    <p class="wapper">
        <p class="content">
             <h2>Demo</h2><p class="article-demo">
                <form action="#demo-form" id="demo-form">
                    <fieldset>
                        <legend>Test fields</legend>
                        <p>
                            <label for="demo-field-1">Required field</label>
                            <input id="demo-field-1" validation="required" name="demo-field-1" type="text" />
                        </p>
                        <p>
                            <label for="demo-field-2">Email field</label>
                            <input id="demo-field-2" validation="email" name="demo-field-2" type="text" />
                        </p>
                        <p>
                            <label for="demo-field-3">URL field</label>
                            <input id="demo-field-3" validation="url" name="demo-field-3" type="text" />
                        </p>
                    </fieldset>
                    <p class="submit-area">
                        <input value="Validate!" type="submit" id="btn_submit" />
                    </p> 
                </form>
        </p>
    </p>
</body>

 作者:張慧

You May Also Like