[jQuery]jQueryを使用する.Validateによるクライアント検証(初級編)

25393 ワード

JavaScript jquery css スクリプト asp

引用:http://www.cnblogs.com/kyo-yo/archive/2010/06/28/Use-jQueryValidate-To-Validate-Client.html
jQuery.Validate、この検証ライブラリはjQueryに属するプラグインであり、bassistance.deによって作成され、bassistance.deにはAccordion Autocomplete(私のjQueryを使うAutoCompleteは淘宝商品の検索機能を完成した(キーボードの上下選択体験を改善した)はこのautocompleteに基づいて作成された)、TooltipなどのjQueryの他のプラグインもたくさん提供されています(具体的には彼らのウェブサイトで見ることができます).
jQueryを使うことにしました.ValidateはまずJSプラグインをダウンロードします.
http://bassistance.de/jquery-plugins/jquery-plugin-validation/にアクセスしてDownLoadダウンロードを選択します.多くの例が含まれています.
これから本格的に使用し、基本的なサイトを構築します.マスターページを作成します(ここでマスターページを使用するのは、特定の項目に共通のものを格納するマスターページがあるためです.ここでは実際の環境をシミュレートするために、マスターページを作成します.必要でないと思ったら、直接ページを作成しなくてもいいです).jQueryとjQuery.Validateをマスターページに導入します.

小技巧:一般的な引用とは異なり、こちらではスクリプトのパスをPageに採用しています.ResolveClientUrlは、いくつかのプロジェクト開発では、異なるモジュールのコードが異なるディレクトリに分けて操作されるため、マスターページの半分はウェブサイトのルートディレクトリにあるため、すべてのページの基本が参照できることを保証するために、パスを再取得する必要があります(ただし、バックグラウンドのコードにダイナミックに

に物を追加することはできません.コンパイラはエラーを報告します.解決策は

にliteralコントロールを入れ、バックグラウンドコードにliteralにスペルを再割り当てすることです).
基本的に必要なスクリプトを参照した後、マスター・ページにスクリプトを追加して検証します.
jQuery.Validateはformを監視し、フォームをコミットする操作の前にjQuery.Validateでは、フォームの入力項目がルールを満たしているかどうかを検出し、それを満たしてからコミットを許可します.だから必要だ
jQuery(document)にします.ready()の場合formの検証登録を行う
具体的なコードは以下の通りです.


  
  
   
   <!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->
   
   <
   
   body
   
   >
   
    
   
   <
   
   form 
   
   id
   
   ="form1"
   
    runat
   
   ="server"
   
   >
   
    
   
   <
   
   div
   
   >
   
    
   
   <
   
   asp:ContentPlaceHolder 
   
   ID
   
   ="ContentPlaceHolder1"
   
    runat
   
   ="server"
   
   >
   
    
   
   </
   
   asp:ContentPlaceHolder
   
   >
   
    
   
   </
   
   div
   
   >
   
    
   
   </
   
   form
   
   >
   
    
   
   <
   
   script 
   
   type
   
   ="text/javascript"
   
   >
   
    jQuery(document).ready(
   
   function
   
   () { jQuery(
   
   "
   
   #<%=form1.ClientID %>
   
   "
   
   ).validate(); }); 
   
   </
   
   script
   
   >
   
    
   
   </
   
   body
   
   >

なぜjQuery.をValidateのコードはページのに書かれており,検証ルールの作成とグループ化検証の方法は中級編と上級編で説明される.
検証モニタリングを登録した後、具体的な検証コードの作成を開始することができます.マスターページを通じてサブページを作成し、ページにいくつかの基本的な入力ボックスコードを以下のように配置します.


  
  
   
   <!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->
   
   <%
   
   @ Page Title
   
   =
   
   "
   
         -    
   
   "
   
    Language
   
   =
   
   "
   
   C#
   
   "
   
    MasterPageFile
   
   =
   
   "
   
   ~/MasterPage.master
   
   "
   
    AutoEventWireup
   
   =
   
   "
   
   true
   
   "
   
    CodeFile
   
   =
   
   "
   
   Base.aspx.cs
   
   "
   
    Inherits
   
   =
   
   "
   
   _Base
   
   "
   
    
   
   %>
   
    
   
   <
   
   asp:Content 
   
   ID
   
   ="Content1"
   
    ContentPlaceHolderID
   
   ="head"
   
    runat
   
   ="Server"
   
   >
   
    
   
   </
   
   asp:Content
   
   >
   
    
   
   <
   
   asp:Content 
   
   ID
   
   ="Content2"
   
    ContentPlaceHolderID
   
   ="ContentPlaceHolder1"
   
    runat
   
   ="Server"
   
   >
   
    
   
   <
   
   table 
   
   cellpadding
   
   ="1"
   
    cellspacing
   
   ="1"
   
    border
   
   ="1"
   
    width
   
   ="50%"
   
    align
   
   ="center"
   
   >
   
    
   
   <
   
   tr
   
   >
   
    
   
   <
   
   td
   
   >
   
        
   
   </
   
   td
   
   >
   
    
   
   <
   
   td
   
   >
   
    
   
   <
   
   asp:TextBox 
   
   ID
   
   ="txtUid"
   
    runat
   
   ="server"
   
    CssClass
   
   ="required"
   
   ></
   
   asp:TextBox
   
   >
   
    
   
   </
   
   td
   
   >
   
    
   
   </
   
   tr
   
   >
   
    
   
   <
   
   tr
   
   >
   
    
   
   <
   
   td
   
   >
   
       
   
   </
   
   td
   
   >
   
    
   
   <
   
   td
   
   >
   
    
   
   <
   
   asp:TextBox 
   
   ID
   
   ="txtName"
   
    runat
   
   ="server"
   
    CssClass
   
   ="required"
   
   ></
   
   asp:TextBox
   
   >
   
    
   
   </
   
   td
   
   >
   
    
   
   </
   
   tr
   
   >
   
    
   
   <
   
   tr
   
   >
   
    
   
   <
   
   td
   
   >
   
       
   
   </
   
   td
   
   >
   
    
   
   <
   
   td
   
   >
   
    
   
   <
   
   asp:TextBox 
   
   ID
   
   ="TextBox1"
   
    runat
   
   ="server"
   
    CssClass
   
   ="number"
   
   ></
   
   asp:TextBox
   
   >
   
    
   
   </
   
   td
   
   >
   
    
   
   </
   
   tr
   
   >
   
    
   
   <
   
   tr
   
   >
   
    
   
   <
   
   td
   
   >
   
       
   
   </
   
   td
   
   >
   
    
   
   <
   
   td
   
   >
   
    
   
   <
   
   asp:TextBox 
   
   ID
   
   ="TextBox2"
   
    runat
   
   ="server"
   
    CssClass
   
   ="email"
   
   ></
   
   asp:TextBox
   
   >
   
    
   
   </
   
   td
   
   >
   
    
   
   </
   
   tr
   
   >
   
    
   
   <
   
   tr
   
   >
   
    
   
   <
   
   td 
   
   colspan
   
   ="2"
   
    align
   
   ="center"
   
   >
   
    
   
   <
   
   asp:Button 
   
   ID
   
   ="Button1"
   
    runat
   
   ="server"
   
    Text
   
   ="  "
   
    
   
   />
   
    
   
   </
   
   td
   
   >
   
    
   
   </
   
   tr
   
   >
   
    
   
   </
   
   table
   
   >
   
    
   
   </
   
   asp:Content
   
   >

上のコードでは、ユーザー名、名前、年齢、メールボックスの検証が完了しています.発見したかどうか分かりませんが、textboxごとのclassスタイルです.requiredは必須、numberは数字、emailは電子メールのグリッドでなければなりません.required emailと書くと、このフィールドに記入しなければなりません.同時にemail形式でなければなりません.
どうですか.かなり簡単なのか、ドラッグコントロールを省いたり、検証コントロールを指定したりする煩わしいコードを省いたり、1つの【スタイル名】だけで済みます.もちろんjQuery.Validateでは、日付、範囲、最大値、最小値、整数、値比較など、多くの検証方法が提供されています.また、検証方法をカスタマイズすることもできます(もちろん、このカスタム検証方法は初級編では到着しません.中級高級編を期待してください).
では、送信ボタンをクリックして、実行の効果を見てみましょう.

いいですね.やはり検証に成功しましたが、問題があります.どうやって情報が英語だらけだとヒントを与えますか.
jQueryを見てみましょうValidateソースコードは、236行でやはりメッセージの定義を提示する方法があり、こちらのメッセージを中国語に変更したり、中国語のメッセージjQueryをカスタマイズしたりすることができます.Validate.message_cn.js、そしてjQueryを使います.extendはjQueryを上書きするValidate自身のメッセージ、コードは以下の通りです.


   
   
    
    <!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->
    
    //       var cnmsg = { required: "    ", remote: "      ", email: "            ", url: "        ", date: "        ", dateISO: "         (ISO).", number: "        ", digits: "      ", creditcard: "          ", equalTo: "         ", accept: "              ", maxlength: jQuery.format("           {0}     "), minlength: jQuery.format("           {0}     "), rangelength: jQuery.format("          {0}   {1}       "), range: jQuery.format("        {0}   {1}     "), max: jQuery.format("         {0}   "), min: jQuery.format("         {0}   ") }; jQuery.extend(jQuery.validator.messages, cnmsg);

これでマスターページでjQueryを引用するだけです.Validate.message_cn.jsは元の英語のヒントを置き換えることができて、2つの方法はすべて取ることができて、もしあなたがjQuery.をValidateを自分に合った検証コントロールに変更するのは、1つ目の方法でソースコードを直接変更することです.基本的な機能を使って元のソースコードを動かしたくないだけなら、2つ目の方法を使うことです.
そして私たちは再びページを更新して、やはりすべて中国語になりました.効果を見る:

注意:こちらのエラーメッセージのスタイルは自分で定義することができて、私は元のスタイルを修正して、エラーアイコンを加えて、もっときれいにして、スタイルの定義は以下の通りです:


   
   
    
    <!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->
    
     <style type="text/css"> 
    
    /*
    
    ***********jQuery.Validate      *******************
    
    */
    
     label.error 
    
    {
    
     background
    
    :
    
     url(images/error.png) no-repeat 0px 0px
    
    ;
    
     color
    
    :
    
     Red
    
    ;
    
     padding-left
    
    :
    
     20px
    
    ;
    
     
    
    }
    
     input.error 
    
    {
    
     border
    
    :
    
     dashed 1px red
    
    ;
    
     
    
    }
    
     
    
    /*
    
    ***********jQuery.Validate      *******************
    
    */
    
     </style>

ここで、jQueryを使用します.Validateがクライアント検証を行う初級編が書き終わり、具体的なコードは以下のソースコードをダウンロードして見ることができます.中級編と高級編を期待してください.
PS:1、コード中jquery.validate.jsは公式バージョンでjquery.validate1.jsは私のために修正したバージョンで、修正の内容について中級編と高級編で話します.
2、jQuery.Validateはクライアント検証のみ可能であり,サーバ側検証に代わるものではなく,システムの安全のためにサーバ側が検証する.
ソースのダウンロード:ダウンロード
作成者:
kyo-yo
出典:
http://kyo-yo.cnblogs.com
本文の著作権は著者とブログ園に共有され、転載を歓迎するが、著者の同意を得ずにこの声明を保留し、文章のページの明らかな位置で原文の接続を与えなければならない.そうしないと、法律責任を追及する権利を保留する.

AndroidのLineやFaceBookのWebview（アプリ内ブラウザ）からだけサイトが表示されない場合の対処法

Let’s EncryptにてACME v2でワイルドカード証明書を発行