`
wbj0110
  • 浏览: 1599072 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

jQuery用面向对象的思想来编写验证表单的插件

阅读更多

本人的重点是怎么构建一个简单有效可扩展的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验证插件(表单验证)

    在JavaScript方面,jQuery验证插件使用了面向对象的设计模式,其核心类是`Validator`。开发者可以通过实例化这个类来创建一个新的验证器对象,并对其设置验证规则、错误消息和选项。同时,插件还提供了一些辅助函数...

    Jquery快速学(五,常用的插件应用与编写)

    3. **验证插件validation.html**:这个章节可能涉及使用jQuery实现表单验证,比如使用jQuery Validate插件。该插件允许开发者方便地添加验证规则,对用户输入进行实时检查,提升用户体验。 4. **样式插件...

    SSH+JQuery插件+Mysql

    Hibernate作为ORM工具,使得开发者可以通过面向对象的方式来操作数据库,避免了传统的SQL编写,提高了开发效率。 JQuery是一款强大的JavaScript库,它简化了DOM(Document Object Model)操作、事件处理、动画效果...

    (六)struts2 spring3 mybatis-3.2.3jquery.validationEngineajax表单验证数据库重复

    **jQuery.validationEngine** 是一个用于前端表单验证的JavaScript插件,提供丰富的验证规则和提示效果,增强了用户体验。通过CSS样式和多国语言支持,可以轻松实现美观且功能强大的表单验证。 **Ajax** 技术允许在...

    jQuery权威指南-源代码

    7.3 表单插件form /202 7.4 Cookie插件cookie /205 7.5 搜索插件AutoComplete /209 7.6 图片灯箱插件notesforlightbox /213 7.7 右键菜单插件contextmenu /216 7.8 图片放大镜插件jqzoom /222 7.9 自定义...

    最新版锋利的jquery综合案例

    6. **插件应用**:jQuery拥有丰富的插件生态系统,如轮播图插件、表单验证插件等,案例中可能会涵盖如何使用和自定义这些插件。 7. **响应式设计**:随着移动设备的普及,响应式设计是现代网页开发的必备技能,案例...

    精通JavaScript+jQuery(实例)

    17. 面向对象编程:深入理解面向对象的编程思想和JavaScript中的实现。 18. 模块化与打包工具:了解模块化开发和Webpack等打包工具的使用。 19. 最新趋势与前沿技术:探讨React、Vue等现代前端框架,了解Web开发的...

    JavaScript与JQuery分享

    虽然它不是一门纯粹的面向对象语言,但可以通过函数和原型链实现面向对象编程。JavaScript 提供了丰富的数据结构,如数组、JSON 对象、函数等,并支持与浏览器交互,如访问 DOM(文档对象模型)和调用 COM 组件。...

    精通JAVAScript+jQuery书中实例

    7. **jQuery插件**:jQuery拥有大量的社区插件,如用于表单验证的jQuery Validation Plugin,图片轮播插件如Bootstrap Carousel,这些插件大大扩展了jQuery的功能。 8. **响应式设计**:在现代Web开发中,了解如何...

    jQuery.JavaScript与CSS开发入门经典

    6. **jQuery插件**:探索如何利用已有的jQuery插件扩展功能,以及编写自己的插件。 7. **响应式设计**:学习使用CSS3媒体查询实现不同设备上的适配和布局。 8. **CSS布局**:深入理解Flexbox和Grid布局模型,创建...

    最新jdk1.8中文帮助文档+Jquery帮助文档

    4. **jQuery插件**:jQuery社区提供了丰富的插件,如轮播图、下拉菜单、表单验证等,这些插件可以极大地扩展jQuery的功能。 5. **CHM文件使用**:了解如何打开、搜索和导航CHM文件,以及如何复制和粘贴代码片段。 ...

    jQuery实战中文版

    6. **插件生态**: jQuery拥有丰富的插件生态系统,如用于表单验证的jQuery Validation,用于图片轮播的bxSlider,以及用于弹窗提示的jQuery UI等,极大地扩展了其功能。 7. **链式操作**: jQuery对象的方法返回的仍...

    众妙之门——JavaScript与jQuery技术精粹

    同时,深入探讨面向对象编程,如类、对象、原型链等高级特性,让读者能够熟练地运用JavaScript进行程序设计。 jQuery是基于JavaScript的库,简化了DOM操作、事件处理、动画效果和Ajax交互,使得前端开发更加高效。...

    《深入PHP与JQUERY开发》.(Jason Lengstorf).[PDF].&ckook.pdf )

    3. **面向对象编程**:PHP5之后版本完全支持面向对象编程(OOP),包括类、接口、继承、封装等概念。 4. **错误处理机制**:通过设置错误级别和使用异常处理来提高程序的健壮性和调试效率。 5. **安全性**:PHP内置...

    从零开始学习jQuery word格式完整版

    "HELLO WORLD JQUERY"则会展示一个简单的jQuery代码示例,通常是通过`$(document).ready()`函数来确保页面加载完毕后执行代码,以`$("selector").action()`的形式展示jQuery的选择器和方法使用。 3. jQuery核心概念...

    C# Asp.net Jquery Ajax 经典案例

    首先,C#是一种面向对象的编程语言,由微软公司为.NET框架开发。它的语法简洁,功能强大,广泛用于桌面和Web应用开发。在Asp.net框架下,C#可以编写服务器端代码,处理用户请求,管理数据,以及创建复杂的业务逻辑。...

    精通javascript+jquery第7课.rar

    JavaScript的面向对象特性,结合jQuery的便利性,可以让开发者编写出既高效又可维护的代码。同时,熟悉DOM操作和Ajax通信也是现代Web开发不可或缺的技能。 总的来说,“精通JavaScript+jQuery第7课”会引导你深入...

    jQuery插件简单实现方法

    总的来说,jQuery插件的实现涉及到对jQuery API的熟练掌握,以及对JavaScript面向对象编程的理解。通过学习和实践,开发者能够构建出功能强大的、可扩展的前端解决方案。记住,良好的插件设计应该遵循一定的原则,如...

    java资料jqueryAPI

    9. **插件扩展(Plugins)**:jQuery社区提供了大量的插件,如表单验证、轮播图、日期选择器等,它们进一步扩展了jQuery的功能。 10. **兼容性(Compatibility)**:jQuery致力于跨浏览器兼容,使得开发者无需担心...

    52680JavaScript+jQuery交互式Web前端开发-源代码

    此外,JavaScript还支持面向对象编程,通过原型继承和构造函数实现对象的创建和操作。 jQuery是一个强大的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作和Ajax交互。jQuery的语法简洁易懂,使得开发者...

Global site tag (gtag.js) - Google Analytics