本人的重点是怎么构建一个简单有效可扩展的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>
分享到：
相关推荐
在JavaScript方面，jQuery验证插件使用了面向对象的设计模式，其核心类是`Validator`。开发者可以通过实例化这个类来创建一个新的验证器对象，并对其设置验证规则、错误消息和选项。同时，插件还提供了一些辅助函数...
3. **验证插件validation.html**：这个章节可能涉及使用jQuery实现表单验证，比如使用jQuery Validate插件。该插件允许开发者方便地添加验证规则，对用户输入进行实时检查，提升用户体验。 4. **样式插件...
Hibernate作为ORM工具，使得开发者可以通过面向对象的方式来操作数据库，避免了传统的SQL编写，提高了开发效率。 JQuery是一款强大的JavaScript库，它简化了DOM（Document Object Model）操作、事件处理、动画效果...
**jQuery.validationEngine** 是一个用于前端表单验证的JavaScript插件，提供丰富的验证规则和提示效果，增强了用户体验。通过CSS样式和多国语言支持，可以轻松实现美观且功能强大的表单验证。 **Ajax** 技术允许在...
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 自定义...
6. **插件应用**：jQuery拥有丰富的插件生态系统，如轮播图插件、表单验证插件等，案例中可能会涵盖如何使用和自定义这些插件。 7. **响应式设计**：随着移动设备的普及，响应式设计是现代网页开发的必备技能，案例...
17. 面向对象编程：深入理解面向对象的编程思想和JavaScript中的实现。 18. 模块化与打包工具：了解模块化开发和Webpack等打包工具的使用。 19. 最新趋势与前沿技术：探讨React、Vue等现代前端框架，了解Web开发的...
虽然它不是一门纯粹的面向对象语言，但可以通过函数和原型链实现面向对象编程。JavaScript 提供了丰富的数据结构，如数组、JSON 对象、函数等，并支持与浏览器交互，如访问 DOM（文档对象模型）和调用 COM 组件。...
7. **jQuery插件**：jQuery拥有大量的社区插件，如用于表单验证的jQuery Validation Plugin，图片轮播插件如Bootstrap Carousel，这些插件大大扩展了jQuery的功能。 8. **响应式设计**：在现代Web开发中，了解如何...
6. **jQuery插件**：探索如何利用已有的jQuery插件扩展功能，以及编写自己的插件。 7. **响应式设计**：学习使用CSS3媒体查询实现不同设备上的适配和布局。 8. **CSS布局**：深入理解Flexbox和Grid布局模型，创建...
4. **jQuery插件**：jQuery社区提供了丰富的插件，如轮播图、下拉菜单、表单验证等，这些插件可以极大地扩展jQuery的功能。 5. **CHM文件使用**：了解如何打开、搜索和导航CHM文件，以及如何复制和粘贴代码片段。 ...
6. **插件生态**: jQuery拥有丰富的插件生态系统，如用于表单验证的jQuery Validation，用于图片轮播的bxSlider，以及用于弹窗提示的jQuery UI等，极大地扩展了其功能。 7. **链式操作**: jQuery对象的方法返回的仍...
同时，深入探讨面向对象编程，如类、对象、原型链等高级特性，让读者能够熟练地运用JavaScript进行程序设计。 jQuery是基于JavaScript的库，简化了DOM操作、事件处理、动画效果和Ajax交互，使得前端开发更加高效。...
3. **面向对象编程**：PHP5之后版本完全支持面向对象编程（OOP），包括类、接口、继承、封装等概念。 4. **错误处理机制**：通过设置错误级别和使用异常处理来提高程序的健壮性和调试效率。 5. **安全性**：PHP内置...
"HELLO WORLD JQUERY"则会展示一个简单的jQuery代码示例，通常是通过`$(document).ready()`函数来确保页面加载完毕后执行代码，以`$("selector").action()`的形式展示jQuery的选择器和方法使用。 3. jQuery核心概念...
首先，C#是一种面向对象的编程语言，由微软公司为.NET框架开发。它的语法简洁，功能强大，广泛用于桌面和Web应用开发。在Asp.net框架下，C#可以编写服务器端代码，处理用户请求，管理数据，以及创建复杂的业务逻辑。...
JavaScript的面向对象特性，结合jQuery的便利性，可以让开发者编写出既高效又可维护的代码。同时，熟悉DOM操作和Ajax通信也是现代Web开发不可或缺的技能。 总的来说，“精通JavaScript+jQuery第7课”会引导你深入...
总的来说，jQuery插件的实现涉及到对jQuery API的熟练掌握，以及对JavaScript面向对象编程的理解。通过学习和实践，开发者能够构建出功能强大的、可扩展的前端解决方案。记住，良好的插件设计应该遵循一定的原则，如...
9. **插件扩展（Plugins）**：jQuery社区提供了大量的插件，如表单验证、轮播图、日期选择器等，它们进一步扩展了jQuery的功能。 10. **兼容性（Compatibility）**：jQuery致力于跨浏览器兼容，使得开发者无需担心...
此外，JavaScript还支持面向对象编程，通过原型继承和构造函数实现对象的创建和操作。 jQuery是一个强大的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作和Ajax交互。jQuery的语法简洁易懂，使得开发者...