Yii2学习笔记系列4——Working With Forms（使用Form表单）

三 06 四月 2016

Yii2笔记系列4——Wroking With Forms（使用Form表单）

本章节的主要学习目标是学习如何创建一个可以让用户输入数据并提交的表单页，该页面会显示一个包含姓名输入框和Email输入框的表单，当用户提交这两部分信息后，页面将会显示用户输入的信息。

为了实现这个目标，我们需要创建一个action、两个视图以及一个模型。

创建模型

这里我们在basic/models下创建一个名为EntryForm的模型类，代表从用户请求的数据，具体代码如下：

<?php
/**
 * Created by PhpStorm.
 * User: 赵振棠
 * Date: 16/4/6
 */
namespace app\models;

use yii\base\Model;

class EntryForm extends Model
{
    public $user_name;
    public $user_email;

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

该类继承自Yii提供的一个基类yii\base\Model，该基类通常用来表示数据。

EntryForm类包含user_name和user_email两个公共成员，用来储存用户输入的数据。它还包含一个名为rules()的方法，用来返回数据验证规则的集合，上面声明的验证规则表示： - user_name和user_email这两个的值都是必须的 - user_email的值必须满足Email规则验证

如果你有一个处理用户提交数据的EntryForm对象，你可以调用它的yii\base\Model::validate()方法触发数据验证。如果有数据验证失败，将把yii\base\Model::hasErrors属性设置为true，想要知道具体发生什么错误可以调用yii\base\Model::getErrors，具体示例如下：

<?php
$model = new EntryForm();
$model->user_name = 'aaaa';
$model->user_email = 'bbbb';
if ($model->validate()) {
    // 通过验证
} else {
    // 验证失败！
    // 此处可以使用 $model->getErrors() 获取错误详情
}

创建action

接下来我们需要在site控制器中创建一个entry操作用于新建的模型。

<?php

namespace app\controllers;

use app\models\EntryForm;
use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;
use yii\filters\VerbFilter;
use app\models\LoginForm;
use app\models\ContactForm;

class SiteController extends Controller
{
    /**
     * @desc 用来测试Form表单
     * @return string
     */
    public function actionEntry()
    {
        $model = new EntryForm();
        if ($model->load(Yii::$app->request->post()) && $model->validate()) {
            // $model收到的数据通过验证
            // do something useful
            return $this->render('entry-confirm', ['model' => $model]);
        } else {
            // 初始化失败或者数据验证错误
            return $this->render('entry', ['model' => $model]);
        }
    }
}

该操作首先创建了一个EntryForm对象，然后尝试从$_POST中搜集用户提交的数据，由Yii的yii\web\Request::post()方法负责搜集。如果模型被成功的填充了数据（即用户提交了HTML表单），操作将调用yii\base\Model::validate()方法进行验证，确保用户提交的数据有效。

补充：表达式Yii:$app代表应用实例，它是一个全局可以访问的单例，同事也是一个服务定位器，能够提供request，response，db等特定功能的组件。上面的代码里就是使用request组件来访问应用实例收到的$_POST数据。

用户提交表单后，action会渲染一个名为entry-confirm的视图，确认用户输入的数据，如果表单项为空，或者提交的数据中包含错误（这里主要指的是email格式不对），则会渲染输出entry视图，连同表单一起输出的还有验证错误的相信信息。

补充：在实际开发中可以考虑使用yii\web\Controller:refresh()或yii\web\Controller::redirect()来避免表单重复提交的问题。

创建视图

最后我们还需要创建两个视图文件entry-confirm和entry，这两个视图会被上一步中创建的entry action渲染。

entry-confirm视图用来显示用户提交的user_name和user_email数据，视图文件保存在views/site/entry-confirm.php中。

<?php
/**
 * Created by PhpStorm.
 * User: 赵振棠
 * Date: 16/4/6
 */
use yii\helpers\Html;

?>
<p>您提交了如下的信息:</p>

<ul>
    <li><label>姓名</label>:<?= Html::encode($model->user_name) ?></li>
    <li><label>Email</label>:<?= Html::encode($model->user_email) ?></li>
</ul>

entry视图显示一个HTML表单，保存在views/site/entry.php中。

<?php
/**
 * Created by PhpStorm.
 * User: EricTang
 * Date: 16/4/6
 * Time: 下午1:52
 */
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'user_name') ?>
<?= $form->field($model, 'user_email') ?>
<div class="form-group">
    <?= Html::submitButton('提交', ['class' => 'btn btn-primart']) ?>
</div>
<?php ActiveForm::end(); ?>

视图使用了一个功能强大的小部件 yii\widgets\ActiveForm来生成HTML表单，其中，begin()和end()分别用来渲染表单的开始和关闭标签。在这两个方法之间使用了yii\widgets\ActiveForm::field()方法去创建输入框，第一个输入框用于输入“user_name”，第二个输入框用于输入“user_email”，之后使用yii\helpers\Html::submitButton()方法生成提交按钮。

完成之后我们通过在浏览器中访问下面的URL查看它是否能够工作：

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

你会看到一个包含两个输入框的表单的页面，并且每个输入框前面都有一个label标签指明应该输入的数据类型，如果什么都不填或者填写的Email格式不正确，将会在输入框下方看到相应的错误信息。

输入有效的姓名和Email并且点击提交按钮之后，将会看到一个显示你所提交数据的确认页面：

简单说一下Yii的HTML表单验证吧，这里的表单首先会通过js脚本来进行验证，之后才会提交给服务器通过PHP验证，所以才能做到不需要刷新页面就能进行表单数据验证。

输入框的文字标签是field()方法生成的，内容就是模型中该数据的属性名，我们可以在视图中自定义该标签。

<?= $form->field($model, 'user_name')->label('姓名') ?>
<?= $form->field($model, 'user_email')->label('伊妹') ?>

补充：Yii提供了相当多类似的小部件帮我们生成复杂且动态的视图，在后面我们还会了解到自己写小部件是多么的简单，我们可以把自己的很多视图代码转化成小部件以提高重用，加快开发效率。

总结

本篇我们接触到了MVC设计模式的每个部分，学习了如何创建一个模型代表用户数据，并且验证它的有效性，以及从用户获取数据并在浏览器上回显给用户，幸亏Yii提供了强大的小部件让它变得如此简单。

下一篇中我们将会学习如何使用数据库，这个也是很重要的部分，因为几乎每个应用都需要数据库。

Category: PHP Develop

三 06 四月 2016

Yii2笔记系列4——Wroking With Forms（使用Form表单）

创建模型

创建action

创建视图

总结

Comments