自带丰富示例的 jQuery验证表单插件

查看效果

下载地址

这是一款jQuery 表单验证插件，不过它自带了好多种不同用途的表单验证示例，主要有用户名登录、用户注册、Email确认、自定义信息提示，单癣复选框判断、下拉列表选值判断、文件上传验证、多表单验证等。这些示例都是非常实用的，经常从事WEB编程的朋友值得拥有，有点遗憾是文档是英文。

前台部分代码

 

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=ISO-8859-1"   />
< title > jQuery validation plug-in - main demo </ title >
 
< link  rel ="stylesheet"  type ="text/css"  media ="screen"  href ="css/screen.css"   />
 
< script  src ="../lib/jquery.js"  type ="text/javascript" ></ script >
< script  src ="../jquery.validate.js"  type ="text/javascript" ></ script >
 
< script  src ="js/cmxforms.js"  type ="text/javascript" ></ script >
< script  type ="text/javascript" >  
$.validator.setDefaults({
    submitHandler:  function () { alert( " submitted! " ); }
});
 
$().ready( function () {
     //  validate the comment form when it is submitted
    $( " #commentForm " ).validate();
    
     //  validate signup form on keyup and submit
    $( " #signupForm " ).validate({
        rules: {
            firstname:  " required " ,
            lastname:  " required " ,
            username: {
                required:  true ,
                minlength:  2
            },
            password: {
                required:  true ,
                minlength:  5
            },
            confirm_password: {
                required:  true ,
                minlength:  5 ,
                equalTo:  " #password "
            },
            email: {
                required:  true ,
                email:  true
            },
            topic: {
                required:  " #newsletter:checked " ,
                minlength:  2
            },
            agree:  " required "
        },
        messages: {
            firstname:  " Please enter your firstname " ,
            lastname:  " Please enter your lastname " ,
            username: {
                required:  " Please enter a username " ,
                minlength:  " Your username must consist of at least 2 characters "
            },
            password: {
                required:  " Please provide a password " ,
                minlength:  " Your password must be at least 5 characters long "
            },
            confirm_password: {
                required:  " Please provide a password " ,
                minlength:  " Your password must be at least 5 characters long " ,
                equalTo:  " Please enter the same password as above "
            },
            email:  " Please enter a valid email address " ,
            agree:  " Please accept our policy "
        }
    });
    
     //  propose username by combining first- and lastname
    $( " #username " ).focus( function () {
         var  firstname  =  $( " #firstname " ).val();
         var  lastname  =  $( " #lastname " ).val();
         if (firstname  &&  lastname  &&   ! this .value) {
             this .value  =  firstname  +   " . "   +  lastname;
        }
    });
    
     // code to hide topic selection, disable for demo
     var  newsletter  =  $( " #newsletter " );
     //  newsletter topics are optional, hide at first
     var  inital  =  newsletter.is( " :checked " );
     var  topics  =  $( " #newsletter_topics " )[inital  ?   " removeClass "  :  " addClass " ]( " gray " );
     var  topicInputs  =  topics.find( " input " ).attr( " disabled " ,  ! inital);
     //  show when newsletter is checked
    newsletter.click( function () {
        topics[ this .checked  ?   " removeClass "  :  " addClass " ]( " gray " );
        topicInputs.attr( " disabled " ,  ! this .checked);
    });
});
</ script >
 
< style  type ="text/css" >  
#commentForm  {  width :  500px ;   }
#commentForm label  {  width :  250px ;   }
#commentForm label.error, #commentForm input.submit  {  margin-left :  253px ;   }
#signupForm  {  width :  670px ;   }
#signupForm label.error  {
    margin-left :  10px ;
    width :  auto ;
    display :  inline ;
}
#newsletter_topics label.error  {
    display :  none ;
    margin-left :  103px ;
}
</ style >
 
</ head >
< body >
 
< h1  id ="banner" >< a  href ="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" > jQuery Validation Plugin </ a >  Demo </ h1 >
< div  id ="main" >
 
< p > Default submitHandler is set to display an alert into of submitting the form </ p >
 
< form  class ="cmxform"  id ="commentForm"  method ="get"  action ="" >
     < fieldset >
         < legend > Please provide your name, email address (won't be published) and a comment </ legend >
         < p >
             < label  for ="cname" > Name (required, at least 2 characters) </ label >
             < input  id ="cname"  name ="name"  class ="required"  minlength ="2"   />
         < p >
             < label  for ="cemail" > E-Mail (required) </ label >
             < input  id ="cemail"  name ="email"  class ="required email"   />
         </ p >
         < p >
             < label  for ="curl" > URL (optional) </ label >
             < input  id ="curl"  name ="url"  class ="url"  value =""   />
         </ p >
         < p >
             < label  for ="ccomment" > Your comment (required) </ label >
             < textarea  id ="ccomment"  name ="comment"  class ="required" ></ textarea >
         </ p >
         < p >
             < input  class ="submit"  type ="submit"  value ="Submit" />
         </ p >
     </ fieldset >
</ form >
 
< form  class ="cmxform"  id ="signupForm"  method ="get"  action ="" >
     < fieldset >
         < legend > Validating a complete form </ legend >
         < p >
             < label  for ="firstname" > Firstname </ label >
             < input  id ="firstname"  name ="firstname"   />
         </ p >
         < p >
             < label  for ="lastname" > Lastname </ label >
             < input  id ="lastname"  name ="lastname"   />
         </ p >
         < p >
             < label  for ="username" > Username </ label >
             < input  id ="username"  name ="username"   />
         </ p >
         < p >
             < label  for ="password" > Password </ label >
             < input  id ="password"  name ="password"  type ="password"   />
         </ p >
         < p >
             < label  for ="confirm_password" > Confirm password </ label >
             < input  id ="confirm_password"  name ="confirm_password"  type ="password"   />
         </ p >
         < p >
             < label  for ="email" > Email </ label >
             < input  id ="email"  name ="email"   />
         </ p >
         < p >
             < label  for ="agree" > Please agree to our policy </ label >
             < input  type ="checkbox"  id ="agree"  name ="agree"   />
         </ p >
         < p >
             < label  for ="newsletter" > I'd like to receive the newsletter </ label >
             < input  type ="checkbox"  id ="newsletter"  name ="newsletter"   />
         </ p >
         < fieldset  id ="newsletter_topics" >
             < legend > Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo </ legend >
             < label  for ="topic_marketflash" >
                 < input  type ="checkbox"  id ="topic_marketflash"  value ="marketflash"  name ="topic"   />
                Marketflash
             </ label >
             < label  for ="topic_fuzz" >
                 < input  type ="checkbox"  id ="topic_fuzz"  value ="fuzz"  name ="topic"   />
                Latest fuzz
             </ label >
             < label  for ="topic_digester" >
                 < input  type ="checkbox"  id ="topic_digester"  value ="digester"  name ="topic"   />
                Mailing list digester
             </ label >
             < label  for ="topic"  class ="error" > Please select at least two topics you'd like to receive. </ label >
         </ fieldset >
         < p >
             < input  class ="submit"  type ="submit"  value ="Submit" />
         </ p >
     </ fieldset >
</ form >
 
< h3 > Syntetic examples </ h3 >
< ul >
     < li >< a  href ="errorcontainer-demo.html" > Error message containers in action </ a ></ li >
     < li >< a  href ="custom-messages-metadata-demo.html" > Custom Messages as Metadata </ a ></ li >
     < li >< a  href ="radio-checkbox-select-demo.html" > Radio and checkbox buttons and selects </ a ></ li >
     < li >< a  href ="ajaxSubmit-intergration-demo.html" > Integration with Form Plugin (AJAX submit) </ a ></ li >
     < li >< a  href ="custom-methods-demo.html" > Custom methods and message display. </ a ></ li >
     < li >< a  href ="dynamic-totals.html" > Dynamic forms </ a ></ li >
</ ul >
< h3 > Real-world examples </ h3 >
< ul >
     < li >< a  href ="milk/" > Remember The Milk signup form </ a ></ li >
     < li >< a  href ="marketo/" > Marketo signup form </ a ></ li >
     < li >< a  href ="multipart/" > Buy and Sell a House multipart form </ a ></ li >
     < li >< a  href ="captcha/" > Remote captcha validation </ a ></ li >
</ ul >
 
< h3 > Testsuite </ h3 >
< ul >
     < li >< a  href ="../test/" > Validation Testsuite </ a ></ li >
</ ul >     
 
</ div >
 
< script  src ="http://www.google-analytics.com/urchin.js"  type ="text/javascript" >  
</ script >
< script  type ="text/javascript" >  
_uacct  =   " UA-2623402-1 " ;
urchinTracker();
</ script >
</ body >
</ html >