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用面向对象的思想来编写验证表单的插件的更多相关文章
- ValidForm验证表单
在做项目时,要求熟悉项目中验证表单的插件,所以学习一下validForm这个插件 http://validform.rjboy.cn/document.html#validformObject
- jquery.validate 使用--验证表单隐藏域
jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...
- MVC4中 jquery validate 不用submit方式验证表单或单个元素
正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...
- 运用jQuery写的验证表单
//运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- MVC中 jquery validate 不用submit方式验证表单或单个元素
<script src="/Scripts/jquery-1.4.4.js"></script> <script src="/Scripts ...
- jquery.validate验证表单
添加引用 <script src="/${appName}/commons/js/validate/jquery.validate.min.js"></scrip ...
- 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等
JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
随机推荐
- Java反射机制demo（三）—获取类中的构造函数
Java反射机制demo(三)—获取类中的构造函数 1,获取类中所有的构造函数 如下面的代码中所示,这个类中显式的构造函数有五个. 空构造: public UserInfo() 带参构造有四个: pu ...
- Picasso：开启大前端的未来
“道生一,一生二,二生三,三生万物.” —— <道德经> Picasso是大众点评移动研发团队自研的高性能跨平台动态化框架,经过两年多的孕育和发展,目前在美团多个事业群已经实现了大规模的应 ...
- Xamarin无法调试Android项目
Xamarin无法调试Android项目 项目可以正常编译,生成APK,也可以通过右键菜单部署.但是一旦开启调试,就报错.错误信息如下: 没有为此解决方案配置选中要生成的项目 出现这种问题是因 ...
- iOS Sprite Kit教程之真机测试以及场景的添加与展示
iOS Sprite Kit教程之真机测试以及场景的添加与展示 IOS实现真机测试 在进行真机测试之前,首先需要确保设备已经连在了Mac(或者Mac虚拟机)上,在第1.9.1小节开始,设备就一直连接在 ...
- 机器学习之路：python支持向量机回归SVR 预测波士顿地区房价
python3 学习使用api 支持向量机的两种核函数模型进行预测 git: https://github.com/linyi0604/MachineLearning from sklearn.dat ...
- 关于PyCharm database查看db.sqlites文件无内容的一种可能解决方法
初学python,学到了scrapy爬虫数据入库,在网上跟着一个视频课进行学习,但是碰到了如下问题: 这里新建了数据库文件之后,将这个.sqlite文件拖动到Database里面,然后出现了上图描述问 ...
- github下载项目
- java多线程技术之（callable和future）
接着上一篇继续并发包的学习,本篇说明的是Callable和Future,它俩很有意思的,一个产生结果,一个拿到结果. Callable接口类似于Runnable,从名字就可以看出来了,但是Runnab ...
- IO流-复制多极文件夹(递归实现)
package com.io.test; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import ...
- cocos2d-x项目101次相遇:使用触摸事件移动 精灵
cocos2d-x 101次相遇 / 文件夹 1 安装和环境搭建 -xcode 2 Scenes , Director, Layers, Sprites 3 建立图片菜单 4 在 ...