如何以CustomValidator搭配jQuery AJAX进行Server端验证(转)

许多网站提供使用者自行透过系统介面加入会员，为了避免使用者名称重复，常会提供使用者名称检查是否存在的机制。本文将介绍如何以CustomValidator搭配jQuery AJAX来呼叫Server端网页进而模拟验证使用者名称是否可用。

以下程式码范例为用来检查使用者名称是否存在的主要页面：

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxCustomValid.aspx.cs" Inherits="WebApplication2.AjaxCustomValid" %>
  
   <! 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  runat ="server" >
      < title ></ title >
    < script  src ="JS/jquery.min.js"  type ="text/javascript" ></ script >
      <script type= "text/javascript" >
         function Valid(sender, args) {
              $.ajax({
                  type: 'post' ,
                 url: 'CustomValid.aspx' ,
                 data: 'name=' + $( '#txtName' ).val(),
                 success: function (result) {
                     $( '#hidResult' ).val(result);
                  },
                  error: function () { $( '#hidResult' ).val( 'Fail' ); }
              })
              if ($( '#hidResult' ).val() == 'Pass' )
                   args.IsValid = true ;
               else
                   args.IsValid = false ;
          };        
       </ script >
   </ head >
  < body >
      < form  id ="form1"  runat ="server" >
      < div >
           使用者名称：< asp:TextBox  ID ="txtName"  runat ="server" ></ asp:TextBox >
          < br  />
          < asp:HiddenField  ID ="hidResult"  runat ="server"  />
         < asp:RequiredFieldValidator  ID ="rfvName"  runat ="server"  ErrorMessage ="请输入使用者名称"  Display ="None"
           ControlToValidate ="txtName" ></ asp:RequiredFieldValidator >
          < asp:CustomValidator  ID ="cvName"  Display ="None"  runat ="server" 
                  ClientValidationFunction ="Valid"  ErrorMessage ="该使用者名称已经存在!!!"  ControlToValidate ="txtName" ></ asp:CustomValidator >
           < asp:Button  ID ="Button1"  runat ="server"  Text ="Cehck!"  onclick ="Button1_Click"   />
          < asp:ValidationSummary  ID ="vs"  runat ="server"  ShowMessageBox ="true"  ShowSummary ="false"  />
     </ div >
       </ form >
  </ body >
  </ html >

• 下列程式码为上述ASPX网页的CodeBehind类别的内容：

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

namespace WebApplication2
 {
    public  partial  class AjaxCustomValid : System.Web.UI.Page
     {
        protected  void Page_Load( object sender, EventArgs e)
         {
             Response.Write( string .Format( "系统时间：{0}<br/>" , DateTime.Now.ToString()));
         }

        protected  void Button1_Click( object sender, EventArgs e)
         {
            if (Page.IsValid)
                 Response.Write( string .Format( "使用者名称【{0}】可使用" , txtName.Text));
         }
     }
 }

【程式码说明】

在Page Load事件中，显示目前的系统时间，用来确认是否验证使用者名称是否存在的动作的确为非同步呼叫，接着于Button Click事件中若Page.IsValid为真，则显示使用者所输入的名称。

 

• 下列程式码为用来验证使用者名称是否存在的页面，特别注意的是，我将所有HTML TAG都移除，让回传验证结果给前端时比较方便处理，不过建议要做这种没有UI的网页，还是使用泛型处理常式会比较好。

   1:   <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomValid.aspx.cs" Inherits="WebApplication2.CustomValid" %>

• 下列程式码范例示范模拟验证使用者名称是否存在。

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

namespace WebApplication2
 {
    public  partial  class CustomValid : System.Web.UI.Page
     {
        protected  void Page_Load( object sender, EventArgs e)
         {
            string name = Request.Form[ "name" ];
            //这边各位可以依照自己的商业逻辑来撰写，例如资料库存取或是其他运算
            if ( string .IsNullOrEmpty(name))
                 Response.Write( "Fail" );
            else
             {
                if (name.ToUpper() == "TERRY" )
                     Response.Write( "Fail" );
                else
                     Response.Write( "Pass" );
             }
         }
     }
 }

注：ajax要设置成同步 async: false。
这是因为ajax异步执行完设置args.IsValid时ms注册的检查这个属性是否为true的代码已经执行过了，所以ajax再设置args.IsValid就没什么作用了，不会再次触发ms注册检查args.IsValid事件。