使用jQuery.Validate(3)

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " Demo2.aspx.cs "  Inherits = " Web.Ajax.Validate.Demo2 "   %>

<! 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 >
   < title ></ title >
   < script  src ="http://www.cnblogs.com/scripts/jquery.js"  type ="text/javascript" ></ script >
   < script  src ="http://www.cnblogs.com/scripts/jquery.metadata.js"  type ="text/javascript" ></ script >
   < script  src ="http://www.cnblogs.com/scripts/jquery.validate.js"  type ="text/javascript" ></ script >
   < script  src ="http://www.cnblogs.com/scripts/cmxforms.js"  type ="text/javascript" ></ script >
   < style  type ="text/css" >
    body, input, select, textarea  {  font-family :  verdana, arial, helvetica, sans-serif ;  font-size :  11px ;   }
    .cmxform fieldset p.error label  {  color :  red ;   }
    div.container  { background-color :  #eee ; border :  1px solid red ; margin :  5px ; padding :  5px ; }
    div.container ol li  { list-style-type :  disc ; margin-left :  20px ; }
    div.container  {  display :  none  }
    .container label.error  { display :  inline ; }
    form.cmxform  {  width :  30em ;   }
    form.cmxform label.error  { display :  block ; margin-left :  1em ; width :  auto ; }
    form.cmxform legend, form.cmxform label  { color :  #333 ; }
    form.cmxform label.error, label.error  { color :  red ; font-style :  italic }
    div.error  {  display :  none ;   }
    input  {     border :  1px solid #a3c6d4 ;   }
    input:focus  {  border :  1px solid #a3c6d4 ;   }
    input.error  {  border :  1px solid red ;   }
    form.cmxform .gray *  {  color :  gray ;   }
   </ style >
   < script  type ="text/javascript" >
     //  only for demo purposes
    $.validator.setDefaults({
      submitHandler:  function () {
        alert( " submitted! (skipping validation for cancel button) " );
      }
    });

    $().ready( function () {
      $( " #form1 " ).validate({
        errorLabelContainer: $( " #form1 div.error " )
      });

       var  container  =  $( ' div.container ' );
       //  validate the form when it is submitted
       var  validator  =  $( " #form2 " ).validate({
        errorContainer: container,
        errorLabelContainer: $( " ol " , container),
        wrapper:  ' li ' ,
        meta:  " validate "
      });

      $( " .cancel " ).click( function () {
        validator.resetForm();
      });
    });
   </ script >
</ head >
< body >
   < form  method ="get"   id ="form1"  action ="" >
       < fieldset >
           < legend > Login Form </ legend >
           < p >
               < label > Username </ label >
               < input  name ="user"  title ="Please enter your username (at least 3 characters)"  class ="{required:true,minlength:3}"   />
           </ p >
           < p >
               < label > Password </ label >
               < input  type ="password"  maxlength ="12"  name ="password"  title ="Please enter your password, between 5 and 12 characters"  class ="{required:true,minlength:5}"   />
           </ p >
           < div  class ="error" >
           </ div >
           < p >
               < input  class ="submit"  type ="submit"  value ="Login" />
           </ p >
       </ fieldset >
   </ form >

   <!--  our error container  -->
   < div  class ="container" >
       < h4 > There are serious errors in your form submission, please see below for details. </ h4 >
       < ol >
           < li >< label  for ="email"  class ="error" > Please enter your email address </ label ></ li >
           < li >< label  for ="phone"  class ="error" > Please enter your phone  < b > number </ b >  (between 2 and 8 characters) </ label ></ li >
           < li >< label  for ="address"  class ="error" > Please enter your address (at least 3 characters) </ label ></ li >
           < li >< label  for ="avatar"  class ="error" > Please select an image (png, jpg, jpeg, gif) </ label ></ li >
           < li >< label  for ="cv"  class ="error" > Please select a document (doc, docx, txt, pdf) </ label ></ li >
       </ ol >
   </ div >

   < form   id ="form2"  method ="get"  action ="" >
       < fieldset >
           < legend > Validating a complete form </ legend >
           < p >
               < label  for ="email" > Email </ label >
               < input  id ="email"  name ="email"  class ="{validate:{required:true,email:true}}"   />
           </ p >
           < p >
               < label  for ="agree" > Favorite Color </ label >
               < select  id ="color"  name ="color"  title ="Please select your favorite color!"  class ="{validate:{required:true}}" >
                   < option ></ option >
                   < option > Red </ option >
                   < option > Blue </ option >
                   < option > Yellow </ option >
               </ select >
           </ p >
           < p >
               < label  for ="phone" > Phone </ label >
               < input  id ="phone"  name ="phone"  class ="some styles {validate:{required:true,number:true, rangelength:[2,8]}}"   />
           </ p >
           < p >
               < label  for ="address" > Address </ label >
               < input  id ="address"  name ="address"  class ="some other styles {validate:{required:true,minlength:3}}"   />
           </ p >
           < p >
               < label  for ="avatar" > Avatar </ label >
               < input  type ="file"  id ="avatar"  name ="avatar"  class ="{validate:{required:true,accept:true}}"   />
           </ p >
           < p >
               < label  for ="agree" > Please agree to our policy </ label >
               < input  type ="checkbox"  id ="agree"  title ="Please agree to our policy!"  name ="agree"  class ="{validate:{required:true}}"   />
           </ p >
           < p >
               < label  for ="cv" > CV </ label >
               < input  type ="file"  id ="cv"  name ="cv"  class ="{validate:{required:true,accept:'docx?|txt|pdf'}}"   />
           </ p >
           < p >
               < input  class ="submit"  type ="submit"  value ="Submit" />
               < input  class ="cancel"  type ="submit"  value ="Cancel" />
           </ p >
       </ fieldset >
   </ form >

   < div  class ="container" >
       < h4 > There are serious errors in your form submission, please see details above the form! </ h4 >
   </ div >
</ body >
</ html >