正文

轻松学会Yii2框架：如何巧妙隐藏表单并成功提交，实战案例详解

/0 浏览量
0621

在开发过程中，有时我们希望表单能够在不破坏页面布局的情况下，能够被用户在需要时轻松触发。例如，一个弹出式的登录表单或者联系表单。在Yii2框架中，我们可以通过CSS和JavaScript来实现这一功能。以下，我将通过一个实战案例，详细讲解如何在Yii2中巧妙隐藏表单并成功提交。

前言

在开始之前，我们先来了解一下本次实战案例的需求：

  • 我们需要创建一个登录表单，该表单默认是隐藏的。
  • 用户点击登录按钮时，表单将显示。
  • 表单提交后，进行验证，并将结果反馈给用户。

准备工作

首先，我们需要在Yii2项目中创建一个控制器（Controller），用于处理登录请求。接着，创建一个视图（View），用于显示登录表单。

创建控制器

  1. 在控制器目录下，创建一个名为LoginController.php的文件。
namespace app\controllers;

use Yii;
use app\models\LoginForm;

class LoginController extends \yii\web\Controller
{
    public function actionIndex()
    {
        if (!Yii::$app->user->isGuest) {
            return $this->goHome();
        }

        $model = new LoginForm();
        if ($model->load(Yii::$app->request->post()) && $model->login()) {
            return $this->goBack();
        }

        return $this->render('index', [
            'model' => $model,
        ]);
    }
}

创建视图

  1. 在views/login目录下，创建一个名为index.php的文件。
<?php

use yii\widgets\ActiveForm;
use app\models\LoginForm;

/* @var $this yii\web\View */
/* @var $model LoginForm */

?>
<div class="login-form">
    <?php $form = ActiveForm::begin(['id' => 'login-form']); ?>

        <h2>登录</h2>

        <?= $form->field($model, 'username')->textInput() ?>
        <?= $form->field($model, 'password')->passwordInput() ?>
        <?= $form->field($model, 'rememberMe')->checkbox() ?>

        <div class="form-group">
            <button type="submit" class="login-btn">登录</button>
        </div>

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

实现隐藏表单

现在，我们已经创建了一个基本的登录表单。接下来，我们将通过CSS和JavaScript来隐藏和显示表单。

  1. 在views/login目录下，创建一个名为login.css的文件。
.login-form {
    display: none;
}
  1. 在views/login目录下，创建一个名为login.js的文件。
document.addEventListener('DOMContentLoaded', function() {
    var loginBtn = document.querySelector('.login-btn');
    var loginForm = document.querySelector('.login-form');

    loginBtn.addEventListener('click', function() {
        loginForm.style.display = 'block';
    });
});
  1. 修改index.php文件，引入CSS和JavaScript文件。
<?php $this->head() ?>
<link rel="stylesheet" href="<?= Yii::$app->assetManager->getBundle('app\assets\LoginAsset')->baseUrl; ?>/css/login.css">
<script src="<?= Yii::$app->assetManager->getBundle('app\assets\LoginAsset')->baseUrl; ?>/js/login.js"></script>
<?php $this->end() ?>

测试效果

现在，我们可以在浏览器中访问登录页面，点击登录按钮后，登录表单将会显示。

总结

通过本篇文章，我们学习了如何在Yii2框架中巧妙隐藏表单并成功提交。在实际开发过程中，我们可以根据需求，灵活运用CSS和JavaScript来实现更多有趣的功能。希望这篇文章能够对您有所帮助。

-- 展开阅读全文 --