使用表單

本章節(jié)介紹如何創(chuàng)建一個(gè)讓用戶提交數(shù)據(jù)的表單頁。該頁將顯示一個(gè)包含 name 輸入框和 email 輸入框的表單。當(dāng)提交這兩部分信息后，頁面將會顯示用戶所輸入的信息。

為了實(shí)現(xiàn)這個(gè)目標(biāo)，除了創(chuàng)建一個(gè)操作和兩個(gè)視圖外，還需要創(chuàng)建一個(gè)模型。

貫穿整個(gè)小節(jié)，你將會學(xué)到：

• 創(chuàng)建一個(gè)模型代表用戶通過表單輸入的數(shù)據(jù)
• 聲明規(guī)則去驗(yàn)證輸入的數(shù)據(jù)
• 在視圖中生成一個(gè) HTML 表單

創(chuàng)建模型

模型類?EntryForm?代表從用戶那請求的數(shù)據(jù)，該類如下所示并存儲在?models/EntryForm.php?文件中。請參考類自動加載章節(jié)獲取更多關(guān)于類命名約定的介紹。

<?php

namespace app\models;

use yii\base\Model;

class EntryForm extends Model{
    public $name;
    public $email;

    public function rules()
    {
        return [
            [['name', 'email'], 'required'],
            ['email', 'email'],
        ];
    }
}

該類繼承自Yii 提供的一個(gè)基類 yii\base\Model，該基類通常用來表示數(shù)據(jù)。

補(bǔ)充：yii\base\Model 被用于普通模型類的父類并與數(shù)據(jù)表無關(guān)。yii\db\ActiveRecord 通常是普通模型類的父類但與數(shù)據(jù)表有關(guān)聯(lián)（譯注：yii\db\ActiveRecord 類其實(shí)也是繼承自 yii\base\Model，增加了數(shù)據(jù)庫處理）。

EntryForm?類包含?name?和?email?兩個(gè)公共成員，用來儲存用戶輸入的數(shù)據(jù)。它還包含一個(gè)名為?rules()?的方法，用來返回?cái)?shù)據(jù)驗(yàn)證規(guī)則的集合。上面聲明的驗(yàn)證規(guī)則表示：

• name?和?email?值都是必須的
• email?的值必須滿足email規(guī)則驗(yàn)證

如果你有一個(gè)處理用戶提交數(shù)據(jù)的?EntryForm?對象，你可以調(diào)用它的 yii\base\Model::validate() 方法觸發(fā)數(shù)據(jù)驗(yàn)證。如果有數(shù)據(jù)驗(yàn)證失敗，將把 yii\base\Model::hasErrors 屬性設(shè)為 ture，想要知道具體發(fā)生什么錯(cuò)誤就調(diào)用 yii\base\Model::getErrors。

<?php$model = new EntryForm();
$model->name = 'Qiang';
$model->email = 'bad';
if ($model->validate()) {
    // 驗(yàn)證成功！
} else {
    // 失敗！
    // 使用 $model->getErrors() 獲取錯(cuò)誤詳情
}

創(chuàng)建操作

下面你得在?site?控制器中創(chuàng)建一個(gè)?entry?操作用于新建的模型。操作的創(chuàng)建和使用已經(jīng)在說一聲你好小節(jié)中解釋了。

<?php

namespace app\controllers;

use Yii;
use yii\web\Controller;
use app\models\EntryForm;

class SiteController extends Controller{
    // ...其它代碼...

    public function actionEntry()
    {
        $model = new EntryForm;

        if ($model->load(Yii::$app->request->post()) && $model->validate()) {
            // 驗(yàn)證 $model 收到的數(shù)據(jù)

            // 做些有意義的事 ...

            return $this->render('entry-confirm', ['model' => $model]);
        } else {
            // 無論是初始化顯示還是數(shù)據(jù)驗(yàn)證錯(cuò)誤
            return $this->render('entry', ['model' => $model]);
        }
    }
}

該操作首先創(chuàng)建了一個(gè)?EntryForm?對象。然后嘗試從?$_POST?搜集用戶提交的數(shù)據(jù)，由 Yii 的 yii\web\Request::post() 方法負(fù)責(zé)搜集。如果模型被成功填充數(shù)據(jù)（也就是說用戶已經(jīng)提交了 HTML 表單），操作將調(diào)用 yii\base\Model::validate() 去確保用戶提交的是有效數(shù)據(jù)。

補(bǔ)充：表達(dá)式?Yii::$app?代表應(yīng)用實(shí)例，它是一個(gè)全局可訪問的單例。同時(shí)它也是一個(gè)服務(wù)定位器，能提供request，response，db?等等特定功能的組件。在上面的代碼里就是使用?request?組件來訪問應(yīng)用實(shí)例收到的?$_POST?數(shù)據(jù)。

用戶提交表單后，操作將會渲染一個(gè)名為?entry-confirm?的視圖去確認(rèn)用戶輸入的數(shù)據(jù)。如果沒填表單就提交，或數(shù)據(jù)包含錯(cuò)誤（譯者：如 email 格式不對），entry?視圖將會渲染輸出，連同表單一起輸出的還有驗(yàn)證錯(cuò)誤的詳細(xì)信息。

注意：在這個(gè)簡單例子里我們只是呈現(xiàn)了有效數(shù)據(jù)的確認(rèn)頁面。實(shí)踐中你應(yīng)該考慮使用 yii\web\Controller::refresh() 或 yii\web\Controller::redirect() 去避免表單重復(fù)提交問題。

創(chuàng)建視圖

最后創(chuàng)建兩個(gè)視圖文件?entry-confirm?和?entry。他們會被剛才創(chuàng)建的?entry?操作渲染。

entry-confirm?視圖簡單地顯示提交的 name 和 email 數(shù)據(jù)。視圖文件保存在?views/site/entry-confirm.php。

<?phpuse yii\helpers\Html;
?>
<p>You have entered the following information:</p>

<ul>
    <li><label>Name</label>: <?= Html::encode($model->name) ?></li>
    <li><label>Email</label>: <?= Html::encode($model->email) ?></li>
</ul>

entry?視圖顯示一個(gè) HTML 表單。視圖文件保存在?views/site/entry.php。

<?phpuse yii\helpers\Html;
use yii\widgets\ActiveForm;
?><?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'name') ?>

    <?= $form->field($model, 'email') ?>

    <div class="form-group">
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
    </div>

<?php ActiveForm::end(); ?>

視圖使用了一個(gè)功能強(qiáng)大的小部件?yii\widgets\ActiveForm 去生成 HTML 表單。其中的?begin()?和?end()?分別用來渲染表單的開始和關(guān)閉標(biāo)簽。在這兩個(gè)方法之間使用了 yii\widgets\ActiveForm::field() 方法去創(chuàng)建輸入框。第一個(gè)輸入框用于 “name”，第二個(gè)輸入框用于 “email”。之后使用 yii\helpers\Html::submitButton() 方法生成提交按鈕。

嘗試下

用瀏覽器訪問下面的 URL 看它能否工作：

http://hostname/index.php?r=site/entry

你會看到一個(gè)包含兩個(gè)輸入框的表單的頁面。每個(gè)輸入框的前面都有一個(gè)標(biāo)簽指明應(yīng)該輸入的數(shù)據(jù)類型。如果什么都不填就點(diǎn)擊提交按鈕，或填入格式不正確的 email 地址，將會看到在對應(yīng)的輸入框下顯示錯(cuò)誤信息。

輸入有效的 name 和 email 信息并提交后，將會看到一個(gè)顯示你所提交數(shù)據(jù)的確認(rèn)頁面。

效果說明

你可能會好奇 HTML 表單暗地里是如何工作的呢，看起來它可以為每個(gè)輸入框顯示文字標(biāo)簽，而當(dāng)你沒輸入正確的信息時(shí)又不需要刷新頁面就能給出錯(cuò)誤提示，似乎有些神奇。

是的，其實(shí)數(shù)據(jù)首先由客戶端 JavaScript 腳本驗(yàn)證，然后才會提交給服務(wù)器通過 PHP 驗(yàn)證。yii\widgets\ActiveForm 足夠智能到把你在EntryForm?模型中聲明的驗(yàn)證規(guī)則轉(zhuǎn)化成客戶端 JavaScript 腳本去執(zhí)行驗(yàn)證。如果用戶瀏覽器禁用了 JavaScript， 服務(wù)器端仍然會像actionEntry()?方法里這樣驗(yàn)證一遍數(shù)據(jù)。這保證了任何情況下用戶提交的數(shù)據(jù)都是有效的。

警告：客戶端驗(yàn)證是提高用戶體驗(yàn)的手段。無論它是否正常啟用，服務(wù)端驗(yàn)證則都是必須的，請不要忽略它。

輸入框的文字標(biāo)簽是?field()?方法生成的，內(nèi)容就是模型中該數(shù)據(jù)的屬性名。例如模型中的?name?屬性生成的標(biāo)簽就是?Name。

你可以在視圖中自定義標(biāo)簽：

<?= $form->field($model, 'name')->label('自定義 Name') ?><?= $form->field($model, 'email')->label('自定義 Email') ?>

補(bǔ)充：Yii 提供了相當(dāng)多類似的小部件去幫你生成復(fù)雜且動態(tài)的視圖。在后面你還會了解到自己寫小部件是多么簡單。你可能會把自己的很多視圖代碼轉(zhuǎn)化成小部件以提高重用，加快開發(fā)效率。

總結(jié)

本章節(jié)指南中你接觸了 MVC 設(shè)計(jì)模式的每個(gè)部分。學(xué)到了如何創(chuàng)建一個(gè)模型代表用戶數(shù)據(jù)并驗(yàn)證它的有效性。

你還學(xué)到了如何從用戶那獲取數(shù)據(jù)并在瀏覽器上回顯給用戶。這本來是開發(fā)應(yīng)用的過程中比較耗時(shí)的任務(wù)，好在 Yii 提供了強(qiáng)大的小部件讓它變得如此簡單。