使用jQuery.Validate(1)

 

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

<! 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.validate.js"  type ="text/javascript" ></ script >
   < style  type ="text/css" >
    *  {  margin :  0 ;  padding :  0 ;   }
    body, input, select, textarea  {  font-family :  verdana, arial, helvetica, sans-serif ;  font-size :  11px ;   }
    input { height : 14px ; padding : 2px ; }
    .label { line-height : 18px ; }
    body  {  color :  #333 ;   background-color :  #fff ;  text-align :  left ;   }
    #signupform table  {  border-spacing :  0px ; border-collapse :  collapse ; empty-cells :  show ; }
    #signupform .label  { padding-top :  2px ; padding-right :  8px ; vertical-align :  top ; text-align :  right ; width :  125px ; white-space :  nowrap ; }
    #signupform .field  { padding-bottom :  10px ; white-space :  nowrap ; }
    #signupform .status  { padding-top :  2px ; padding-left :  8px ; vertical-align :  top ; width :  246px ; white-space :  nowrap ; }
    #signupform .textfield  { width :  150px ; }
    #signupform label.error  { background : url("http://images.cnblogs.com/unchecked.gif") no-repeat 0px 0px ; padding-left :  16px ;
                             padding-bottom :  2px ; font-weight :  bold ; color :  #EA5200 ; line-height : 18px ; }
    #signupform label.checked  { background : url("http://images.cnblogs.com/checked.gif") no-repeat 0px 0px ; }
    #signupform .success_msg  { font-weight :  bold ; color :  #0060BF ; margin-left :  19px ; }
    #signupform #dateformatStatus, #signupform #termsStatus  { margin-left :  6px ; }
    #signupform #dateformat_eu  { vertical-align :  middle ; }
    #signupform #ldateformat_eu  { font-weight :  normal ; vertical-align :  middle ; }
    #signupform #dateformat_am  { vertical-align :  middle ; }
    #signupform #ldateformat_am  { font-weight :  normal ; vertical-align :  middle ; }
    #signupform #termswrap  { float :  left ; }
    #signupform #terms  { vertical-align :  middle ; float :  left ; display :  block ; margin-right :  5px ; }
    #signupform #lterms  { font-weight :  normal ; vertical-align :  middle ; float :  left ; display :  block ; width :  350px ; white-space :  normal ; }
    #signupform #lsignupsubmit  { visibility :  hidden ; }
    #signupform #signupsubmit  { height : 24px ; }
   </ style >
   < script  id ="demo"  type ="text/javascript" >
    $(document).ready( function () {
         //  validate signup form on keyup and submit
       var  validator  =  $( " #signupform " ).validate({
            rules: {
                firstname:  " required " ,
                lastname:  " required " ,
                username: {
                    required:  true ,
                    minlength:  2 ,
                    remote:  " demo1.aspx "
                },
                password: {
                    required:  true ,
                    minlength:  5
                },
                password_confirm: {
                    required:  true ,
                    minlength:  5 ,
                    equalTo:  " #password "
                },
                email: {
                    required:  true ,
                    email:  true ,
                    remote:  " demo1.aspx "
                },
                dateformat:  " required " ,
                terms:  " required "
            },
            messages: {
                firstname:  " Enter your firstname " ,
                lastname:  " Enter your lastname " ,
                username: {
                    required:  " Enter a username " ,
                    minlength: jQuery.format( " Enter at least {0} characters " ),
                    remote: jQuery.format( " {0} is already in use " )
                },
                password: {
                    required:  " Provide a password " ,
                    rangelength: jQuery.format( " Enter at least {0} characters " )
                },
                password_confirm: {
                    required:  " Repeat your password " ,
                    minlength: jQuery.format( " Enter at least {0} characters " ),
                    equalTo:  " Enter the same password as above "
                },
                email: {
                    required:  " Please enter a valid email address " ,
                    minlength:  " Please enter a valid email address " ,
                    remote: jQuery.format( " {0} is already in use " )
                },
                dateformat:  " Choose your preferred dateformat " ,
                terms:  " Required "
            },
             //  the errorPlacement has to take the table layout into account
            errorPlacement:  function (error, element) {
                 if  ( element.is( " :radio " ) )
                    error.appendTo( element.parent().next().next() );
                 else   if  ( element.is( " :checkbox " ) )
                    error.appendTo ( element.next() );
                 else
                    error.appendTo( element.parent().next() );
            },
             //  specifying a submitHandler prevents the default submit, good for the demo
            submitHandler:  function () {
                alert( " submitted! " );
            },
             //  set this class to error-labels to indicate valid fields
            success:  function (label) {
                 //  set &nbsp; as text for IE
                label.html( " &nbsp; " ).addClass( " checked " );
            }
        });
        
         //  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;
            }
        });

        jQuery( " #reset " ).click( function () {
          validator.resetForm();
        });
    });
     </ script >
</ head >
< body >
   < form  id ="signupform"  runat ="server" >
     < table >
           < tr >
               < td  class ="label" >< label  id ="lfirstname"  for ="firstname" > First Name </ label ></ td >
               < td  class ="field" >< input  id ="firstname"  name ="firstname"  type ="text"  value =""  maxlength ="100"   /></ td >
               < td  class ="status" ></ td >
           </ tr >
           < tr >
               < td  class ="label" >< label  id ="llastname"  for ="lastname" > Last Name </ label ></ td >
               < td  class ="field" >< input  id ="lastname"  name ="lastname"  type ="text"  value =""  maxlength ="100"   /></ td >
               < td  class ="status" ></ td >
           </ tr >
         < tr >
             < td  class ="label" >< label  id ="lusername"  for ="username" > Username </ label ></ td >
             < td  class ="field" >< input  id ="username"  name ="username"  type ="text"  value =""  maxlength ="50"   /></ td >
             < td  class ="status" ></ td >
         </ tr >
           < tr >
               < td  class ="label" >< label  id ="lpassword"  for ="password" > Password </ label ></ td >
               < td  class ="field" >< input  id ="password"  name ="password"  type ="password"  maxlength ="50"  value =""   /></ td >
               < td  class ="status" ></ td >
           </ tr >
           < tr >
               < td  class ="label" >< label  id ="lpassword_confirm"  for ="password_confirm" > Confirm Password </ label ></ td >
               < td  class ="field" >< input  id ="password_confirm"  name ="password_confirm"  type ="password"  maxlength ="50"  value =""   /></ td >
               < td  class ="status" ></ td >
           </ tr >
         < tr >
             < td  class ="label" >< label  id ="lemail"  for ="email" > Email Address </ label ></ td >
             < td  class ="field" >< input  id ="email"  name ="email"  type ="text"  value =""  maxlength ="150"   /></ td >
             < td  class ="status" ></ td >
         </ tr >
       < tr >
             < td  class ="label" >< label > Which Looks Right </ label ></ td >
             < td  class ="field"  colspan ="2"  style ="vertical-align: top;" >
               < table >
                 < tr >
                     < td  style ="padding-right: 5px;line-height:20px;" >
                         < input  id ="dateformat_eu"  name ="dateformat"  type ="radio"  value ="0"   />
                     < label  id ="ldateformat_eu"  for ="dateformat_eu" > 14/02/07 </ label >
                     </ td >
                     < td  style ="padding-left: 5px;" >
                         < input  id ="dateformat_am"  name ="dateformat"  type ="radio"  value ="1"    />
                     < label  id ="ldateformat_am"  for ="dateformat_am" > 02/14/07 </ label >
                     </ td >
                     < td  class ="status" ></ td >
                 </ tr >
               </ table >
           </ td >
         </ tr >
         < tr >
             < td  class ="label" > &nbsp; </ td >
             < td  class ="field"  colspan ="2" >
                 < div  id ="termswrap"  style ="line-height:18px;" >
                   < input  id ="terms"  type ="checkbox"  name ="terms"  style ="margin-top:3px;" />
             < label  id ="lterms"  for ="terms" > I have read and accept the Terms of Use. </ label >
           </ div >
           < div  class ="status" ></ div >
             </ td >
         </ tr >
         < tr >
             < td  class ="label" >< label  id ="lsignupsubmit"  for ="signupsubmit" > Signup </ label ></ td >
             < td  class ="field"  colspan ="2" >
             < input  id ="signupsubmit"  name ="signup"  type ="submit"  value ="Signup"   />
             < button  id ="reset" > Reset </ button >
             </ td >
         </ tr >
       </ table >
   </ form >
</ body >
</ html >

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;

namespace  Web.Ajax.Validate
{
     public   partial   class  Demo1 : System.Web.UI.Page
    {
         protected   void  Page_Load( object  sender, EventArgs e)
        {
             if  (Request[ " username " ]  !=   null )
            {
                 string  user  =   string .Format( " |{0}| " , Request[ " username " ]);
                 string  rtn  =   " true " ;
                 if  ( " |admin|hxh|huangxh| " .IndexOf(user)  !=   - 1 )
                    rtn  =   " false " ;
                Response.Clear();
                Response.Write(rtn);
                Response.End();
            }
             else   if  (Request[ " email " ]  !=   null )
            {
                 string  rtn  =   " true " ;
                 if  (Request[ " email " ]  ==   " [email protected] " )
                    rtn  =   " false " ;
                Response.Clear();
                Response.Write(rtn);
                Response.End();
            }
        }
    }
}