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用面向对象的思想来编写验证表单的插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一条语句获得一年所有月份
- 下一篇： 学海无涯