js livevalidation客户端验证

livevalidation_standalone.compressed.js:

不看下面，就看例子吧：http://www.cssrain.cn/demo/LiveValidation/livevalidation/demo.html

// LiveValidation 1.2 (standalone version)
// Copyright (c) 2007 Alec Hill (www.livevalidation.com)
// LiveValidation is licensed under the terms of the MIT License
var LiveValidation=function(B,A){this.initialize(B,A)};LiveValidation.TEXTAREA=1;LiveValidation.TEXT=2;LiveValidation.PASSWORD=3;LiveValidation.CHECKBOX=4;LiveValidation.SELECT=5;LiveValidation.massValidate=function(C){var D=true;for(var B=0,A=C.length;B<A;++B){var E=C[B].validate();if(D){D=E}}return D};LiveValidation.prototype={validClass:"LV_valid",invalidClass:"LV_invalid",messageClass:"LV_validation_message",validFieldClass:"LV_valid_field",invalidFieldClass:"LV_invalid_field",initialize:function(D,C){var A=this;if(!D){throw new Error("LiveValidation::initialize - No element reference or element id has been provided!")}this.element=D.nodeName?D:document.getElementById(D);if(!this.element){throw new Error("LiveValidation::initialize - No element with reference or id of '"+D+"' exists!")}this.validations=[];this.elementType=this.getElementType();this.form=this.element.form;var B=C||{};this.validMessage=B.validMessage||"数据合格!";this.insertAfterWhatNode=B.insertAfterWhatNode||this.element;this.onValid=B.onValid||function(){this.insertMessage(this.createMessageSpan());this.addFieldClass()};this.onInvalid=B.onInvalid||function(){this.insertMessage(this.createMessageSpan());this.addFieldClass()};this.onlyOnBlur=B.onlyOnBlur||false;this.wait=B.wait||0;this.onlyOnSubmit=B.onlyOnSubmit||false;if(this.form){this.formObj=LiveValidationForm.getInstance(this.form);this.formObj.addField(this)}this.element.οnfοcus=function(E){A.doOnFocus()};if(!this.onlyOnSubmit){switch(this.elementType){case LiveValidation.CHECKBOX:this.element.οnclick=function(E){A.validate()};case LiveValidation.SELECT:this.element.οnchange=function(E){A.validate()};break;default:if(!this.onlyOnBlur){this.element.οnkeyup=function(E){A.deferValidation()}}this.element.οnblur=function(E){A.doOnBlur()}}}},add:function(A,B){this.validations.push({type:A,params:B||{}});return this},deferValidation:function(B){if(this.wait>=300){this.removeMessageAndFieldClass()}var A=this;if(this.timeout){clearTimeout(A.timeout)}this.timeout=setTimeout(function(){A.validate()},A.wait)},doOnBlur:function(A){this.focused=false;this.validate(A)},doOnFocus:function(A){this.focused=true;this.removeMessageAndFieldClass()},getElementType:function(){switch(true){case (this.element.nodeName=="TEXTAREA"):return LiveValidation.TEXTAREA;case (this.element.nodeName=="INPUT"&&this.element.type=="text"):return LiveValidation.TEXT;case (this.element.nodeName=="INPUT"&&this.element.type=="password"):return LiveValidation.PASSWORD;case (this.element.nodeName=="INPUT"&&this.element.type=="checkbox"):return LiveValidation.CHECKBOX;case (this.element.nodeName=="SELECT"):return LiveValidation.SELECT;case (this.element.nodeName=="INPUT"):throw new Error("LiveValidation::getElementType - Cannot use LiveValidation on an "+this.element.type+" input!");default:throw new Error("LiveValidation::getElementType - Element must be an input, select, or textarea!")}},doValidations:function(){this.validationFailed=false;for(var C=0,A=this.validations.length;C<A;++C){var B=this.validations[C];switch(B.type){case Validate.Presence:case Validate.Confirmation:case Validate.Acceptance:this.displayMessageWhenEmpty=true;this.validationFailed=!this.validateElement(B.type,B.params);break;default:this.validationFailed=!this.validateElement(B.type,B.params);break}if(this.validationFailed){return false}}this.message=this.validMessage;return true},validateElement:function(A,C){var D=(this.elementType==LiveValidation.SELECT)?this.element.options[this.element.selectedIndex].value:this.element.value;if(A==Validate.Acceptance){if(this.elementType!=LiveValidation.CHECKBOX){throw new Error("LiveValidation::validateElement - Element to validate acceptance must be a checkbox!")}D=this.element.checked}var E=true;try{A(D,C)}catch(B){if(B instanceof Validate.Error){if(D!==""||(D===""&&this.displayMessageWhenEmpty)){this.validationFailed=true;this.message=B.message;E=false}}else{throw B}}finally{return E}},validate:function(){var A=this.doValidations();if(A){this.onValid();return true}else{this.onInvalid();return false}},createMessageSpan:function(){var A=document.createElement("span");var B=document.createTextNode(this.message);A.appendChild(B);return A},insertMessage:function(B){this.removeMessage();if((this.displayMessageWhenEmpty&&(this.elementType==LiveValidation.CHECKBOX||this.element.value==""))||this.element.value!=""){var A=this.validationFailed?this.invalidClass:this.validClass;B.className+=" "+this.messageClass+" "+A;if(this.insertAfterWhatNode.nextSibling){this.insertAfterWhatNode.parentNode.insertBefore(B,this.insertAfterWhatNode.nextSibling)}else{this.insertAfterWhatNode.parentNode.appendChild(B)}}},addFieldClass:function(){this.removeFieldClass();if(!this.validationFailed){if(this.displayMessageWhenEmpty||this.element.value!=""){if(this.element.className.indexOf(this.validFieldClass)==-1){this.element.className+=" "+this.validFieldClass}}}else{if(this.element.className.indexOf(this.invalidFieldClass)==-1){this.element.className+=" "+this.invalidFieldClass}}},removeMessage:function(){var A;var B=this.insertAfterWhatNode;while(B.nextSibling){if(B.nextSibling.nodeType===1){A=B.nextSibling;break}B=B.nextSibling}if(A&&A.className.indexOf(this.messageClass)!=-1){this.insertAfterWhatNode.parentNode.removeChild(A)}},removeFieldClass:function(){if(this.element.className.indexOf(this.invalidFieldClass)!=-1){this.element.className=this.element.className.split(this.invalidFieldClass).join("")}if(this.element.className.indexOf(this.validFieldClass)!=-1){this.element.className=this.element.className.split(this.validFieldClass).join(" ")}},removeMessageAndFieldClass:function(){this.removeMessage();this.removeFieldClass()}};var LiveValidationForm=function(A){this.initialize(A)};LiveValidationForm.getInstance=function(A){if(!A.id){A.id="formId_"+new Date().valueOf()}if(!window["LiveValidationForm_"+A.id]){window["LiveValidationForm_"+A.id]=new LiveValidationForm(A)}return window["LiveValidationForm_"+A.id]};LiveValidationForm.prototype={initialize:function(B){this.element=B;this.fields=[];var A=this;this.element.οnsubmit=function(){return LiveValidation.massValidate(A.fields)}},addField:function(A){this.fields.push(A)}};var Validate={Presence:function(B,C){var C=C||{};var A=C.failureMessage||"不能为空哦!";if(B===""||B===null||B===undefined){Validate.fail(A)}return true},Numericality:function(J,E){var A=J;var J=Number(J);var E=E||{};var F=((E.minimum)||(E.minimum==0))?E.minimum:null;var C=((E.maximum)||(E.maximum==0))?E.maximum:null;var D=((E.is)||(E.is==0))?E.is:null;var G=E.notANumberMessage||"必须为数字!";var H=E.notAnIntegerMessage||"必须为整型!";var I=E.wrongNumberMessage||"必须为 "+D+"!";var B=E.tooLowMessage||"必须大于 "+F+"!";var K=E.tooHighMessage||"不能大于 "+C+"!";if(!isFinite(J)){Validate.fail(G)}if(E.onlyInteger&&(//.0+$|/.$/.test(String(A))||J!=parseInt(J))){Validate.fail(H)}switch(true){case (D!==null):if(J!=Number(D)){Validate.fail(I)}break;case (F!==null&&C!==null):Validate.Numericality(J,{tooLowMessage:B,minimum:F});Validate.Numericality(J,{tooHighMessage:K,maximum:C});break;case (F!==null):if(J<Number(F)){Validate.fail(B)}break;case (C!==null):if(J>Number(C)){Validate.fail(K)}break}return true},Format:function(C,D){var C=String(C);var D=D||{};var A=D.failureMessage||"无效!";var B=D.pattern||/./;if(!B.test(C)){Validate.fail(A)}return true},Email:function(B,C){var C=C||{};var A=C.failureMessage||"无效的email地址!";Validate.Format(B,{failureMessage:A,pattern:/^([^@/s]+)@((?:[-a-z0-9]+/.)+[a-z]{2,})$/i});return true},Length:function(F,G){var F=String(F);var G=G||{};var E=((G.minimum)||(G.minimum==0))?G.minimum:null;var H=((G.maximum)||(G.maximum==0))?G.maximum:null;var C=((G.is)||(G.is==0))?G.is:null;var A=G.wrongLengthMessage||"必须 "+C+" 个长度!";var B=G.tooShortMessage||"不能小于"+E+" 位!";var D=G.tooLongMessage||"不能大于"+H+" 位!";switch(true){case (C!==null):if(F.length!=Number(C)){Validate.fail(A)}break;case (E!==null&&H!==null):Validate.Length(F,{tooShortMessage:B,minimum:E});Validate.Length(F,{tooLongMessage:D,maximum:H});break;case (E!==null):if(F.length<Number(E)){Validate.fail(B)}break;case (H!==null):if(F.length>Number(H)){Validate.fail(D)}break;default:throw new Error("Validate::Length - Length(s) to validate against must be provided!")}return true},Inclusion:function(F,G){var G=G||{};var C=G.failureMessage||"精确匹配错误!";if(G.allowNull&&F==null){return true}if(!G.allowNull&&F==null){Validate.fail(C)}var E=G.within||[];var D=false;for(var A=0,B=E.length;A<B;++A){if(E[A]==F){D=true}if(G.partialMatch){if(F.indexOf(E[A])!=-1){D=true}}}if((!G.exclusion&&!D)||(G.exclusion&&D)){Validate.fail(C)}return true},Exclusion:function(A,B){var B=B||{};B.failureMessage=B.failureMessage||"不能输入这些字符!";B.exclusion=true;Validate.Inclusion(A,B);return true},Confirmation:function(C,D){if(!D.match){throw new Error("Validate::Confirmation - Error validating confirmation: Id of element to match must be provided!")}var D=D||{};var B=D.failureMessage||"2次输入的不相同!";var A=D.match.nodeName?D.match:document.getElementById(D.match);if(!A){throw new Error("Validate::Confirmation - There is no reference with name of, or element with id of '"+D.match+"'!")}if(C!=A.value){Validate.fail(B)}return true},Acceptance:function(B,C){var C=C||{};var A=C.failureMessage||"必须选择!";if(!B){Validate.fail(A)}return true},now:function(A,D,C){if(!A){throw new Error("Validate::now - Validation function must be provided!")}var E=true;try{A(D,C||{})}catch(B){if(B instanceof Validate.Error){E=false}else{throw B}}finally{return E}},fail:function(A){throw new Validate.Error(A)},Error:function(A){this.message=A;this.name="ValidationError"}}

 

 

consolidated_common.css:

/******************************* standard stuff *************************************/

body{
  font-family: arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
  color: #666666;
}

h1 { font-size: 200%; letter-spacing: -2px; margin-bottom: 20px; }

h2 { font-size: 180%; letter-spacing: -1px; margin-bottom: 20px; }

h3 { font-size: 150%; letter-spacing: -1px; margin-bottom: 20px; }

h4 { font-size: 120%; letter-spacing: -1px; margin-bottom: 20px; font-weight:bold;}

a {
  outline:none;
  color: #B9D420;
  text-decoration: none;
  border-bottom: 1px dotted #B9D420;
}
a:visited { color: #B9D420; }
a:hover {
  /*color: #ffffff;
  background-color:#ff5398;*/
  color: #009900;
  border-bottom: 1px solid;
}

strong {
  font-weight:bold;
}

em {
  font-style: italic;
}

p {
  margin: 0.5em 0;
  padding-bottom: 0.5em;
}

blockquote {
    color:#888888;
    text-indent:37px;
    background:transparent url(http://www.livevalidation.com/images/generic/blockquote.png) top left no-repeat;
}

cite {
  font-weight: bold;
}

pre {
  padding: 10px;
  font-size: 11px;
  background-color:#f7f7f7;
  padding:2%;
  border:1px solid #e3e3e3;
  margin:0;
  line-height:140%;
 
  /* make lines wrap in pre tag - browser specific so not valid css - lousy browsers */
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

code {
  font-family: monaco,"lucida console","courier new",courier,serif;
  font-size-adjust: none;   
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: normal;
}

/*********************************** forms *****************************************/

label { font-weight: bold; }

input, select {
  width:100px;
}

input, textarea, select {
  border:1px solid #aaaaaa;
  padding:2px;
  background:#ffffff ;
  margin-top:2px;
}

input.checkbox {
  width:15px;
  background:none;
  border:0;
}

input.radio_button {
  width:15px;
  background:none;
  border:0;
}

input.small, select.small {
  width:50px;
}

input.large, select.large {
  width:200px;
}

input.extra_large, select.extra_large {
  width:300px;
}

input:hover, textarea:hover, select:hover {
  border:1px solid #888888;
}

input:active, textarea:active, select:active {
  border:1px solid #888888;
}

input.submit {
  background:#ffffff url(http://www.livevalidation.com/images/generic/submitBg.png) -20px 0 no-repeat;
  color:#ffffff;
}

input.submit:hover {
 
  cursor: pointer;
}

textarea {
  width:300px;
  height: 200px;
}

textarea.deep {
  height:350px;
}

textarea.shallow {
  height:50px;
}

fieldset {
  background:#f7f7f7;
  padding:2%;
  border:1px solid #e3e3e3;
  margin:0;
}

legend {
  font-weight:bold;
  font-size: 120%;
  letter-spacing: -1px;
  color:#666666;
}

/******************************** images ****************************************/

img {
  padding:2px;
  border: 2px solid #cccccc;
  background-color: #eeeeee;
}

/******************************** tables ***************************************/

table {
  border: 1px solid #999999;
}

thead {
  color: #ffffff;
  background: #999999 url(http://www.livevalidation.com/images/generic/theadBg.jpg) top left repeat-x;
  border-bottom: 1px solid #999999;
}

tr.odd { background-color: #eeeeee; }

th, td {
  padding:3px;
  border-right: 1px solid #999999;
}

/********************************** lists **************************************/

ol li {
  list-style-type: decimal;
}

ul li {
  list-style-type: disc;
}

ol, ul, dl {
  padding-left: 30px;
}

dd {
  margin:0 0 4px 0;
  background-color: #eeeeee;
  padding:10px;
}

/********************************* LiveValidation *************************************/

.LV_valid {
    color:#00CC00;
}
 
.LV_invalid {
 color:#CC0000;
}
 
.LV_validation_message{
    font-weight:bold;
    margin:0 0 0 5px;
}
   
.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active,
.fieldWithErrors input.LV_valid_field,
.fieldWithErrors textarea.LV_valid_field {
    border: 1px solid #00CC00;
}
   
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active,
.fieldWithErrors input.LV_invalid_field,
.fieldWithErrors textarea.LV_invalid_field {
    border: 1px solid #CC0000;
}

/************************************ HELPERS ***************************************/  

.floatRight {
  float:right;
}

.floatLeft {
  float:left;
}

.clearBoth {
  clear:both;
}

.clearLeft {
  clear:left;
}

.clearRight {
  clear:right;
}

.inline {
  display:inline;
}

.block {
  display:block;
}

.hidden {
  display:none;
}

.invisible {
  visibility:hidden;
}

.visible {
  visibility:visible;
}

/** margin helpers (useful for floated images) **/

.marginTop10 {
  margin-top:10px;
}

.marginRight10 {
  margin-right:10px;
}

.marginBottom10 {
  margin-bottom:10px;
}

.marginleft10 {
  margin-left:10px;
}

 

 

 

body {
  background-color: #999999;
  border-top:7px solid #999999;
}

#bg {
  background-color: #f9f9f9;
  padding-top:20px;
}

/********************* YAHOO USER INTERFACE GRIDS ELEMENTS *************************/

/* see http://developer.yahoo.com/yui/grids/ */

/* yui doc4 container
   (don't use any positioning stuff for this, just colors etc) */
#doc {
  background-color:transparent;
}

/* yui hd header container
   (don't use any positioning stuff for this, just colors etc)
   use an inner container to add any padding as this will screw up layout*/
#hd {
  background-color: transparent;
}

/* yui ft footer container
   (don't use any positioning stuff for this, just colors etc)
   use an inner container to add any padding as this will screw up layout*/
#ft {
  background-color: transparent;
  text-align:center;
  padding: 10px 0;
  color: #cccccc;
  /*color: #B9D420;*/
}

/************************ MY ELEMENTS ******************************************/

/** header stuff *********************/

/* navigation for head (set up like tabs) */
#head_nav {
 text-align:right;
  padding:0;
  width:auto;
  margin:0 10px 0 0;
}

#head_nav li {
  float: right;
  margin: 0 0 0 1px;
  list-style: none;
}

#head_nav a {
  display: block;
  padding: 0 1em 0.5em 1em;
  text-align:center;
  vertical-align:middle;
  font-size:120%;
  text-decoration: none;
  border:0;
  /*background:#eeeeee;*/
 
  font-weight: bold;
}

#head_nav a:visited { }
#head_nav a:hover {
    /*background:#dddddd;*/
}

#hd h1 a {
  text-indent:-5000px;
  width:272px;
  height:40px;
  background:transparent url(http://www.livevalidation.com/images/bgs/logo.gif) top left no-repeat;
  margin:0 0 10px 0;
  display:block;
  border:0;
}

#hd h2 {
  text-indent:-5000px;
  width:349px;
  height:39px;
  /*float:left;*/
  margin:0 0 0 0;
  background:transparent url(http://www.livevalidation.com/images/bgs/strapline.gif) top left no-repeat;
}

/** content stuff *********************/

#topMain {
  height:30px;
  background:transparent url(http://www.livevalidation.com/images/bgs/topMainBg.gif) top left no-repeat;
  clear:both;
}

#bottomMain {
  height:30px;
  background:transparent url(http://www.livevalidation.com/images/bgs/bottomMainBg.gif) top left no-repeat;
}

#main {
  margin:0;
  background:transparent url(http://www.livevalidation.com/images/bgs/mainBg.gif) top left repeat-y;
}

.container_with_padding {
  padding: 0px 30px;
}

#main li {
  padding: 2px;
  width:620px;
  margin: 0 auto;
}

li.odd {
  background:#FFE2C4;
}

.crumbs {
  margin:0 0 20px 0;
}

cite {
  color:#FF9422;
}

.last {
 margin-bottom:0;
}

/** forms *****/

.vote_button {
  width:inherit;
}

input, select {
  padding:3px;
}

input.radio_button {
  margin-left:50px;
}

input.submit {
  width: inherit;
  background:#cccccc;
  border:0;
  border-bottom: 1px solid #999999;
  border-right: 1px solid #999999;
}

textarea {
  width:400px;
}

textarea.shallow {
  height:100px;
}

/** footer stuff *********************/

#foot_nav {
 margin:0;
 padding:0;
}

#foot_nav li {
  display: inline;
  list-style: none;
  margin:0 0.5em;
}

/** megaFooter stuff *********************/

#megaFooter{
 margin:0;
 padding:10px 5px 5px 5px;
 background-color:#999999;
 color:#ffffff;
 text-align:center;
}

/** pagination ***********************/

.pagination {
  float:right;
}

.pagination a {
  border: 1px solid #FFE2C4;
  color: #FF9422;
}

.pagination a:hover, .pagination a:active {
  border: 1px solid #FF9422;
  color: #000;
}

.pagination span.current {
  border: 1px solid #FF9422;
  background-color: #FF9422;
  color: #FFF;
}

.pagination span.disabled {

}

/** fonts ***************************/

h1, h2, h3 {
  color: #B9D420;
}

a {
  color: #B9D420;
  border-bottom: 1px dotted #B9D420;
}
a:visited { color: #B9D420; }
a:hover {
  color: #009900;
  border-color:#009900;
}

/** specific ************************/

a.gotoTop {
 font-size:12px;
 font-weight:normal;
 float:right;
 margin-top:3px;
}

 

input.sayHello {
 width:100px;
}

#main h4 {
 margin-bottom:10px;
}

#documentation h2, #results h2 {
 padding:5px;
 background: #B9D420;
 color: #666666;
}

.section h3, #documentation h3 {
 padding:3px;
 background: #eeeeee;
}

.section h4, #documentation h4 {
 border-top: 1px solid #eeeeee;
 border-bottom: 1px solid #eeeeee;
 margin-bottom:10px;
 padding:3px 0;
}

form label {
 display:block;
}

#hideForTests {
    position:absolute;
    top:-5000px;
    left:-5000px;
    visibility:hidden;
}

a.downloadButton {
 border:0;
 text-indent:-5000px;
 display:block;
 height:48px;
 width:270px;
 padding:0;
 margin:0 auto;
 background:transparent url(http://www.livevalidation.com/images/downloadButton.gif) 0px 0px no-repeat;
}

a.downloadButton:hover {
 background-position: 0px -60px;
 border:0;
}

object.adsense {
 width: 728px;
 height:90px;
 border:0;
 padding:0;
 margin:0;
 overflow:hidden;
}

 

.date {
 
 float:left;
 text-align:center;
 width:50px;
 background:#B9D420;
 padding:10px 0;
 margin-right:10px;
}

.date strong {
  display:block;
 font-size:200%;
}

.chatterBox {
  float:left;
 margin-bottom:20px;
 width:625px;
}

hr.divider {
 border:0;
 border-top:1px solid #cccccc;
 padding:0;
 margin:15px 0 20px 0;
 background:transparent;
}

p.update {
 padding:10px;
 background:#F9F9F9;
 border: 1px solid #cccccc;
 margin-bottom:15px;
}

/* support boxes *************/

#main .supportBox {
 float:left;
 margin:0 0 20px 60px;
 width:160px;
}

#main .supportBox ul {
 margin-top:5px;
 padding:0;

}

#main .supportBox ul li {
 list-style:none;
 width:160px;
}

#main .supportBox .versions {
 display: none;
 
}

/* browsers */

.firefox, .ie6, .ie7, .safari, .opera, .camino, .netscape, .konqueror {
 text-indent: 20px;
 background-color: #ffffff;
 background-position: 0 2px;
 background-repeat: no-repeat;
}

.firefox {
 background-image: url(http://www.livevalidation.com/images/generic/browsers/firefox.gif);
}

.ie6 {
 background-image: url(http://www.livevalidation.com/images/generic/browsers/ie.gif);
}

.ie7 {
 background-image: url(http://www.livevalidation.com/images/generic/browsers/ie.gif);
}

.safari {
 background-image: url(http://www.livevalidation.com/images/generic/browsers/safari.gif);
}

.opera {
 background-image: url(http://www.livevalidation.com/images/generic/browsers/opera.gif);
}

.camino {
 background-image: url(http://www.livevalidation.com/images/generic/browsers/camino.gif);
}

.netscape {
 background-image: url(http://www.livevalidation.com/images/generic/browsers/netscape.gif);
}

.konqueror {
 background-image: url(http://www.livevalidation.com/images/generic/browsers/konqueror.gif);
}

demp.html

 

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>LiveValidation - Examples</title>
  <!-- yahoo user interface css
      (reset - resets all defaults to be pretty much identical cross browser)
      (fonts - standardises default fonts styles crosss browser)
      (grids - provides cross browser positional styles for creating layouts)
      see http://developer.yahoo.com/yui/grids/ -->
  <!--<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css" />
   <link rel="stylesheet" type="text/css" href="http://www.livevalidation.com/css/yui.css" /> -->
  <!-- <link rel="stylesheet" type="text/css" href="http://www.livevalidation.com/css/standard.css" />
  <link rel="stylesheet" type="text/css" href="http://www.livevalidation.com/css/helpers.css" />
  <link rel="stylesheet" type="text/css" href="http://www.livevalidation.com/css/validation.css" />
  <link rel="stylesheet" type="text/css" href="http://www.livevalidation.com/css/screen.css" /> -->
  <link rel="stylesheet" type="text/css" href="consolidated_common.css" />
  <!--[if IE]>
    <style type="text/css">
  
   #main li {
        width:auto;
      }
     
   /* fix for fieldset background spill bug in all flavours of IE */
   fieldset {
        position: relative;
        margin: 2em 0 1em 0;
      }
      legend {
        position: absolute;
        top: -0.5em;
        left: 0.2em;
      }
  
    </style>
  <![endif]-->

  <!--[if IE 6]>
    <style type="text/css">
      #doc {
   width:58em;
   }
  
  #main .supportBox {
   margin-left:40px;
  }
 </style>
  <![endif]-->
  <script type="text/javascript"
   src="livevalidation_standalone.compressed.js"></script>
 </head>
 <body>

  例子由
  <a href="http://www.cssrain.cn">cssrain</a>翻译,整理....可能细节方面还没处理好,虚心接受意见.
  <br>
  毕竟人家第一次翻译嘛。。。(插件源地址:
  <a href="http://www.livevalidation.com">livevalidation</a>)
  <br>
  <br>
  livevalidation是一个很小的开放源代码,它的作用就是来改善js验证的友好性. 不要再让验证是一种痛苦，和枯燥。
  <br>
  好了，废话少说 看例子吧。
  <br>

  <div id="doc">
   <div class="section" id="examplePresence">
    输入 hello :
    <input type="text" id="sayHello" />
    <script type="text/javascript">
              var sayHello = new LiveValidation('sayHello', { validMessage: '哦,亲爱的,你终于输对了!', wait: 100});
              sayHello.add(Validate.Presence, {failureMessage: "不能为空哦!"});
              sayHello.add(Validate.Format, {pattern: /^hello$/i, failureMessage: "请输入hello!" } );
            </script>
    <br />
   </div>
   <div class="section" id="examplePresence">
    非空 :
    <input type="text" id="f1" />
      <script type="text/javascript">
              var f1 = new LiveValidation('f1');
              f1.add(Validate.Presence);
            </script>
    <br />
   </div>
   <div class="section" id="examplePresence">
    格式 (包含 live ):
    <input type="text" id="f3" />
    <script type="text/javascript">
              var f2 = new LiveValidation('f3');
              f2.add(Validate.Format, { pattern: /live/i });
          </script>
    <br>
    正则表达式
    <br />
   </div>
   <br />
   <br />
   <div class="section" id="examplePresence">
    数字验证(任何数字):
    <input type="text" id="f4" />
    <script type="text/javascript">
              var f3 = new LiveValidation('f4');
              f3.add(Validate.Numericality);
            </script>
    <br />
    <div class="section" id="examplePresence">
     数字验证(必须为整型):
     <input type="text" id="f5" />
       <script type="text/javascript">
               var f4 = new LiveValidation('f5');
               f4.add(Validate.Numericality, { onlyInteger: true } );
             </script>
     <br />
     具体数字验证:
     <input type="text" id="f6" />
       <script type="text/javascript">
               var f5 = new LiveValidation('f6');
               f5.add(Validate.Numericality, { is: 2000 } );
             </script>

     <br />
     大于数字验证：
     <input type="text" id="f7" />
     <script type="text/javascript">
              var f6 = new LiveValidation('f7');
              f6.add(Validate.Numericality, { minimum: 2000 } );
            </script>
     <Br>
     小于数字验证 :
     <input type="text" id="f8" />
     <script type="text/javascript">
              var f7 = new LiveValidation('f8');
              f7.add(Validate.Numericality, { maximum: 2000 } );
            </script>
     <Br>

     在2个数字之间..能用小数(2000--2003)：
     <input type="text" id="f9" />
     <script type="text/javascript">
              var f8 = new LiveValidation('f9');
              f8.add(Validate.Numericality, { minimum: 2000, maximum: 2003 } );
            </script>
     <Br>

     在2个数字之间..不能用小数(2000--2003)：
     <input type="text" id="f10" />
     <script type="text/javascript">
              var f9 = new LiveValidation('f10');
              f9.add(Validate.Numericality, { minimum: 2000, maximum: 2003, onlyInteger: true } );
            </script>
     <Br>
     <Br>
     <Br>
     <Br>
     长度验证(等于4位)：
     <input type="text" id="f11" />
     <script type="text/javascript">
              var f10 = new LiveValidation('f11');
              f10.add(Validate.Length, { is: 4 } );
            </script>
     <Br>
     长度验证(大于等于4位)：
     <input type="text" id="f12" />
     <script type="text/javascript">
              var f11 = new LiveValidation('f12');
              f11.add(Validate.Length, { minimum: 4 } );
            </script>
     <Br>
     长度验证(小于等于4位)：
     <input type="text" id="f13" />
     <script type="text/javascript">
              var f11 = new LiveValidation('f13');
              f11.add(Validate.Length, { maximum: 4 } );
            </script>
     <Br>
     长度验证(4和8个字符长度)：
     <input type="text" id="f14" />
     <script type="text/javascript">
              var f13 = new LiveValidation('f14');
              f13.add(Validate.Length, { minimum: 4, maximum: 8 } );
            </script>
     <Br>
     <Br>
     <Br>

     精确匹配(输入cssrain或者our或者cake):
     <input type="text" id="f15" />
     <script type="text/javascript">
              var f14 = new LiveValidation('f15');
              f14.add(Validate.Inclusion, { within: [ 'cssrain' , 'our', 'cake' ] } );
            </script>
     <Br>
     部分匹配:
     <input type="text" id="f16" />
     <script type="text/javascript">
              var f15 = new LiveValidation('f16');
              f15.add(Validate.Inclusion, { within: [ 'cssrain' , 'our', 'cake' ], partialMatch: true } );
            </script>
     <Br>
     <br>
     <br>
     跟上面2个例子相反（一个是包括，一个是排除）
     <br>
     排斥精确匹配(输入cssrain或者our或者cake):
     <input type="text" id="f17" />
     <script type="text/javascript">
              var f16 = new LiveValidation('f17');
              f16.add(Validate.Exclusion, { within: [ 'cssrain' , 'our', 'cake' ] } );
            </script>
     <Br>
     排斥部分匹配:
     <input type="text" id="f18" />
     <script type="text/javascript">
              var f17 = new LiveValidation('f18');
              f17.add(Validate.Exclusion, { within: [ 'cssrain' , 'our', 'cake' ], partialMatch: true } );
            </script>
     <Br>
     <Br>
     <Br>
     验证复选框:
     <input type="checkbox" id="f19" value="1" class="checkbox" />
     <script type="text/javascript">
              var f18 = new LiveValidation('f19');
              f18.add(Validate.Acceptance );
            </script>
     <Br>
     密码确认：
     <input type="password" id="myPasswordField" />
     <br />
     确认密码:
     <input type="password" id="f20" />
     <script type="text/javascript">
              var f19 = new LiveValidation('f20');
              f19.add(Validate.Confirmation, { match: 'myPasswordField'} );
            </script>
     <br>
     Email验证:
     <input type="text" id="f21" />
     <script type="text/javascript">
              var f20 = new LiveValidation('f21');
              f20.add(Validate.Email );
            </script>
     <br>
     Email验证(综合校验不能小于10大于20位)
     <input type="text" id="f22" />
     <script type="text/javascript">
              var f21 = new LiveValidation('f22');
     f21.add( Validate.Presence );
     f21.add( Validate.Email );
              f21.add(Validate.Length, { minimum: 10, maximum: 20 } );
            </script>
     验证整个表单的提交：
     <form action="#" method="post">
      <fieldset>
       <p>
        <label for="field1" class="displayBlock">
         Email (optional):
        </label>
        <input type="text" id="field1" />
       </p>
       <p>
        <label for="field2" class="displayBlock">
         Acceptance (required):
        </label>
        <input type="checkbox" id="field2" class="checkbox" />
       </p>
       <p>
        <label for="field3" class="displayBlock">
         Presence (required):
        </label>
        <textarea id="field3" class="shallow" rows="2" cols="10"></textarea>
       </p>
       <p>
        <input type="submit" class="submit" value="Test me!" />
       </p>
      </fieldset>
     </form>
     <script type="text/javascript">
       var field1 = new LiveValidation( 'field1', {onlyOnSubmit: true } );
       field1.add( Validate.Email );
       var field2 = new LiveValidation( 'field2', {onlyOnSubmit: true } );
       field2.add( Validate.Acceptance );
       var field3 = new LiveValidation( 'field3', {onlyOnSubmit: true } );
       field3.add( Validate.Presence );

          var automaticOnSubmit = field1.form.onsubmit;
          field1.form.onsubmit = function(){
           var valid = automaticOnSubmit();
           if(valid)alert('The form is valid!');
            return false;
          }
       </script>
     <br>
    </div>
   </div>
 </body>
</html>