実用的な jQuery および PHP CodeIgniter フォーム検証

实战jQuery和PHP CodeIgniter表单验证
原文发表在 http://tech.it168.com/a2011/0818/1234/000001234617.shtml
上,乃本人作品,转载请注明:

前言

　　在Web建站中，表单的合法性验证是十分重要的一个环节，其中包括客户端浏览器的Javascript的验证和服务端的验证。在本文中将指导读者使用jQuery中的validate验证框架实现浏览器端的验证代码编写工作，validate框架是一个十分简单实用的验证框架，能大大提高客户端验证代码的的编写工作，同时，本文使用的是php中十分流行的CodeIgniter框架进行服务端的验证编写工作。本文阅读对象为对jQuery及对PHP CodeIgniter框架有一定认识的读者。

　　准备工作

　　我们必须下载CodeIgniter及jQuery，版本如下：

　　1.CodeIgniter　2.0.2(下载地址：http://codeigniter.com/downloads/)

　　2.jQuery 1.6.1 (下载地址：http://code.jquery.com/jquery-1.6.1.min.js)

　　3.jQuery validate框架，(下载地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/)

　　设置CodeIgniter

　　我们需要自动加载url并且需要使用CodeIgniter中的form表单助手类，所以我们在应用的autoload.php中的第67行添加如下代码：

　　$autoload['helper'] = array('url', 'form');
　　建立视图层文件

　　接下来，我们开始编写页面的HTML页代码，我们将用户填写的表单命名为form_view,当校验成功提交后，如果没任何错误，则显示成功提示信息的页面命名为success_view,当然，我们先编写页面的头部和尾部的代码如下：

　　Views/common/Header.php:

 

   
       
       
       
       
       
       
 
   
   
       

      在header.php中，我们引入了必须引入的jquery类库和jquery　validate框架类库文件。

　　Views/common/footer.php

  

             Tutorial by Gazpo.com.

       

   

 
   

　　在form_view.php用户填写的表单页中，我们引入了CodeIgniter框架提供的表单助手类，

　　利用了其中的form_open标签，代码如下：


load->view('common/header'); ?>
 
   
    'form');
          echo form_open('form/process', $attributes); ?>
 
   

Form Validation with CodeIgniter and jQuery

 
   

    Name
   
   

 
   

    Password
   
   

 
 
   

    Email
   
   

    
 
   

    Select Gender
   

    Male
    Female
   

   

 
 
   

    Select State
   
       
        Alabama
        Alaska
        Arizona
   
   

 
   

    Terms
   
   

<- - フッターを含める -->
load->view('common/footer') ?>
Views/success_view.php

< ;!-- ヘッダーをロード -->
load->view('common/header') ?>

フォームは正常に送信されました!

view('common/footer'); ?>
表示成功ページでは、送信成功のメッセージを表示するだけです。
CSS の設定

次に、フォームを美しくするために、CSS3 を使用していることに注意してください。コードは次のとおりです。
フォントファミリー: arial、verdana、sans-serif;

color:#333333;

font-size:13px;

margin: 0 auto;

背景: #f5f5f5;

}

#wrapper {

マージン: 0 auto;

位置: 相対;

背景: #FFFFFF ;

幅: 900px;

ボーダー: 10px ソリッド

}

#form .field {

margin-bottom:15px;

}

#form label{

表示: ブロック

フロート:

フォントの太さ: 太字;

マージン-右: 10px;

テキストの配置: 右;

幅: 120px;

line-height: 35px;

font-size:14px;
}

#form .checkbox{

margin-top:10px;

}

#form .input{

-moz-border-radius: 7px;

-webkit-border-radius: 7px;

背景-color: #eaeaea;

背景: -moz-linear -gradient(top, #ffffff, #f2f2f2);

背景: -webkit-gradient(linear, 左上, 左下,

color-stop(0.0, #ffffff), color -stop(1.0, #f2f2f2));

ボーダー: 1px ソリッド #cacaca;

フォントファミリー: 継承;

カラー: #797979;

フォントサイズ: 15px;

幅: 300px; > #form .state{

border: 1px Solid #b9bdc1;

padding: 5px;

font-size: 15px;

font-family : 継承;

フォントの太さ: 太字;

カラー: #797979;

}

#form :focus{

-webkit-box-shadow: 0px 0px 4px #aaa;

-moz-box-shadow: 0px 0px 4px #aaa;

box-shadow: 0px 0px 4px #aaa ;

}

#form .gender-fields{

padding-top:10px;

}

#form エラー {

色: 赤;

パディング左:10px; 左:130px;

フォント サイズ: 12px;

フォント スタイル:斜体;

color: #999;

}

#form .submit{

-moz-border-radius: 15px;

- webkit-border-radius: 15px;

font-family: arial,verdana ,sans-serif;

背景色: #dedede;

背景: -moz- Linear-gradient(top, #ffffff, #eaeaea);

背景: -webkit-gradient(linear, 左上, 左下,

color-stop(0.0, #ffffff), color-stop(1.0, #eaeaea));

ボーダー: 1px ソリッド #dedede;

カラー: #484848;

font-size:14px;

フォントの太さ: ボールド;

パディング: 8px 10px;

カーソル: ポインター;

margin-left:220px;

}

/*-- 成功ビューにデータを表示するテーブル設計 --*/

#display_data{

padding:10px;

}

#display_data .name{

font-style: italic;

text-decoration:underline;

}

#display_data table{

border:1px Solid #e5eff8; 0px;

border-collapse:collapse;

}

#display_data tr.even{

background:#f7fbff

}

#display_data tr.odd .title {

background:#f4f9fe;

}

#display_data td {

border-bottom:1px ソリッド #e5eff8;

border-right:1px ソリッド #e5eff8;

カラー:#678197;

パディング:5px 8px;

}

#display_data td.title{

font-weight:bold;

width:100px;

text-align:right;

}

#display_data td.info{

font-style: italic;

width:200px;

}

#footer {

width:60%;

margin:20px auto;

}
CodeIgniterのコントロール層ファイルを書く

次に、ビュー ファイルをロードするために、CodeIgniter でコントロール レイヤー ファイルを作成する必要があります。コントロール レイヤー ファイルに form.php という名前を付け、applications/controller フォルダーに配置します。コードは次のとおりです。

クラス Form extends。 CI_Controller {

パブリック関数 Index()

{

$this->load->view('form_view');

}
これで、ブラウザに次の URL を入力してアクセスできます:

http://localhost/form_validation/index.php/form

それを参照してください。 以下に示すインターフェイスに移動します。


検証用に jQuery Validate プラグインをセットアップします

jQuery Validate プラグインは、多数の電子メール、電話、日付などの検証などの一般的な検証ルール。まず、jQuery Validate の検証ルールを定義および設定する方法を見てみましょう。たとえば、ユーザー名と電子メールをそれぞれ検証するための 2 つのルールが定義されています。

email: {

required: true,

メールアドレス: true

}、

名前: {

必須: true、

最小長: 3、

maxlength: 25 ,

},


このうち、 required 属性は true に設定されており、フィールドの検証が必要であることを示しています。たとえば、ここでは名前フィールドを検証するために設定します。入力の最小長は 3、最大長は 25 です。また、独自の検証ルールを追加したい場合、たとえば、名前フィールドに文字のみを入力できる場合は、独自の検証メソッドを記述して正規表現を使用できます。コードは次のとおりです。 .validator .addMethod("lettersonly", function(value, element) {

return this.optional(element) || /^[a-z]+$/i.test(value);

}, "文字のみを入力してください");


ここでは、addMethod メソッドを通じて、lettersonly という名前の検証メソッドが追加され、正規表現が使用されます。以下は完成した js 検証ファイルです。

(document).ready(function() {

jQuery.validator.addMethod("lettersonly", function(value, element) {

return this.optional(element) || /^[a-z]+$/i.test(value);

}, "文字のみを入力してください");

// キーアップ時にコンタクトフォームを検証して送信

$("#form").validate({

// フィールド名のルールを設定します

ルール: {

名前: {

必須: true、

最小長: 3、

最大長: 25、

文字のみ: true

},

メール: {

必須: true,

メール: true

},

パスワード: {

必須: true、

最小長: 5、

最大長: 15

}、

性別: {

必須 :true

},

状態 : {

必須 :true

},

同意: {

required :true

},

},

//エラーメッセージを設定

messages: {

名前: {

必須: "名前は必須です。",

},

パスワード: {

必須: "入力してください",

minlength: "パスワードは 5 文字以上である必要があります",

maxlength: "パスワードは 15 文字を超えることはできません"

},

email: "有効なメールアドレスが必要です。"、

同意: "当社の規約に同意する必要があります。"、

性別: "性別が必要です"、

State: "Select state"

},

//エラーメッセージの配置

errorElement: "span",

errorPlacement: function(error, element) {

error.appendTo(element.parent());

}

});

}) ;


ここでは、メッセージを設定することで、errElementとerrorPlacementに、エラーが発生した際に、表示位置にエラーメッセージを追記する際に表示するプロンプト情報を設定できます。ページ上の
サーバーサイド CodeIgniter の検証

次に、サーバー側の検証を作成する必要があります。まず、CodeIgniter にライブラリ ファイルの検証アシスタント クラス、つまり

$this -> library( 'form_validation' ); を導入する必要があります。検証ルール。たとえば、名前フィールドの設定ルールは次のとおりです。

$this -> form_validation -> set_rules( 'name', 'Name', 'trim|required|alpha|min_length[ 3]|max_length[25] ' );

つまり、名前フィールドは文字である必要があり、最小長は 3、最大長は 25 で、フィールドを空にすることはできません。

サーバー側の検証が成功すると、成功ページに戻ります。検証が失敗すると、次のように失敗プロンプト情報ページに戻ります。 ; form_validation -> run() === FALSE )

$this -> view( 'form_view' );

}

else

{

$this -> view( 'success_view' );

}


フォームのエラー メッセージを表示します

次に、次のようなフォームの各フィールドにサーバー側検証のエラー メッセージを表示するコードを追加します。

名前



CodeIgniter はデフォルトでフォームを表示します エラーメッセージが段落形式になっており、あまり使い勝手が良くありません 検証アシスタントの設定方法を変更して、各フォームの後に で区切るように設定しましょう。フィールド、つまり:

$this ->form_validation -> set_error_delimiters('', '');

クライアントブラウザとサーバーの二重検証に合格した後、データはこの例では、データベースに保存されませんが、単純にリストすると次のようになります。

$this -> name = $this - > セキュリティ -> xss_clean( $this -> input -> post( 'name' ) );

メール = $this -> this ->input ->post( 'email' ));

//データをロードします

$data['name'] = $this -> >
$data['password'] = $this -> パスワード;

$ this -> vars( $data );

$this -> ;load -> view( 'success_view' );


ここで、クロスサイト RSS 攻撃を防ぐために xss_clean メソッドが呼び出されることにも注意してください。

最後に、完成したコントロール層のコードは次のとおりです。

application/controllers/form.php



class Form extends CI_Controller {

パブリック関数index()

{

$this->load->view('form_view');

}

public function process()

{

$this -> library( 'form_validation' );

$this -> (' ', '');

$this -> form_validation -> set_rules( 'name', 'Name', 'trim|required|alpha|min_length[3]|max_length[15]' );

$this ->form_validation -> set_rules( 'パスワード', 'パスワード', 'trim|required|min_length[4]|max_length[15]' );

$this ->form_validation -> set_rules( 'email', 'Email address', 'trim|required|valid_email' );

$this -> set_rules( '性別', '性別 ', '必須' );

$this -> form_validation -> set_rules( 'state', 'State', 'required' );

$this -> form_validation - > set_rules( 'terms', 'Terms', 'required' );

//検証表示情報を設定します

$this -> set_message( 'min_length; ' , '%s の最小長は %s 文字です');

$this -> form_validation -> set_message( 'max_length', '%s の最大長は %s 文字です');

if ( $this ->gt; form_validation -> run() === FALSE )

{

$this ->load -> ' );

}

else

$this -> 名前 = $this -> 入力 - > post( 'name' ) );

パスワード = $this -> xss_clean( $this -> input -> post( ' パスワード' ) ) ;

$this -> email = $this -> xss_clean( $this -> input -> post( 'email' ));

-> 性別 = $this -> input -> post( 'gender' );

状態 = $this ->

$this -> 用語 = $this -> post( '用語' );

$data['name'] = $this - >

$data['password'] = $this -> パスワード;

$data['email'] = $this -> email;

$data['gender'] = $this -> 性別;

$data['state'] = $this -> state;

$data['terms'] = $this -> term;

//データと成功ビューをロードします。

$ this ->load -> vars( $data );

$this -> view( 'success_view' );

}

}
ユーザーの入力が完全に正しい場合、success_view のビュー ページ コードは次のようになり、ユーザーが入力したフィールド情報が表示されます:

views/success_view.php

Load->view('common/header'); ?>

ありがとうございます、

フォームは正常に送信されました!

次のデータ:

あなたの名前:

メール:

パスワード:

性別:

州:

規約:

Load->view('common/footer'); ?>


最後に、読者はここからダウンロードできます (http://gazpo.com/gazpo) -files/tut10-form/form_validation.zip) を使用して、この記事のコードをダウンロードします。