使用 Symfony 來實(shí)現(xiàn)一個(gè)注冊表單, 這里我們使用 Bootstrap4 快速實(shí)現(xiàn)一個(gè)簡單的注冊表單如下:

SignUp.png

HTML源代碼非常簡單:

<div class="form-box p-3 w-100 bg-white rounded shadow">

      <!-- Form Start -->
      <div class="logo mb-3">
        <div class="col-md-12 text-center">
          <h1>Sign Up</h1>
        </div>
      </div>

      <form action="" method="post" name="regist">

        <div class="form-group">
          <label for="name" class="small">Name</label>
          <div class="input-group">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <i class="fas fa-user"></i>
              </div>
            </div>
            <input type="text" name="name" id="name" class="form-control" placeholder="Enter name">
          </div>
          <div class="text-danger small"></div>
        </div>

        <div class="form-group">
          <label for="email" class="small">Email address</label>
          <div class="input-group">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <i class="far fa-envelope"></i>
              </div>
            </div>
            <input type="text" name="email" id="email" class="form-control" placeholder="Enter email">
          </div>
          <div class="text-danger small"></div>
        </div>

        <div class="form-group">
          <label for="password" class="small">Password</label>
          <div class="input-group">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <i class="fas fa-key"></i>
              </div>
            </div>
            <input type="password" name="password" id="password"  class="form-control" placeholder="Enter Password">
          </div>
          <div class="text-danger small"></div>
        </div>

        <div class="form-group text-center ">
          <button type="submit" class="btn btn-block mybtn btn-primary tx-tfm rounded-pill">Get Started For Free</button>
        </div>
                        
        <div class="form-group">
          <div class="py-2 position-relative text-black-50">
            <hr style="height: 1px; margin-top: 0px; margin-bottom: 0px;">
            <span class="bg-white d-block position-absolute text-center" style="left: 50%; top: -5px; margin-left: -25px; width: 50px;">or</span>
          </div>
        </div>
                        
        <div class="form-group">
          <p class="text-center small">Already have an account? <a href="#" id="signup">Sign in</a></p>
        </div>
                   
      </form>
      <!-- Form End -->

    </div>

現(xiàn)在用 symfony 來完成一個(gè)注冊操作. 先安裝一下 form 包.

composer require symfony/form

創(chuàng)建一個(gè)控制器 DefaultController, 添加方法: signUp() 來處理注冊頁面.

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;

class DefaultController extends AbstractController
{
    /**
     * @Route("/sign-up.html", name="url_sign-up")
     *
     * @param Request $request
     * @return \Symfony\Component\HttpFoundation\Response
     */
    public function signUp(Request $request)
    {
        $formBuilder = $this->createFormBuilder();
        $formBuilder->add('name', TextType::class);
        $formBuilder->add('email', EmailType::class);
        $formBuilder->add('password', PasswordType::class);
        $formBuilder->add('save', SubmitType::class);
        $form = $formBuilder->getForm();

        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $data = $form->getData();
            dump($data);
        } else {
            dump($form->getErrors());
        }
        
        return $this->render('default/sign-up.html.twig', [
            'form' => $form->createView(),
        ]);
    }
}

在模板文件里直接輸出 form

{# template/default/signup.htm.twig #}

{{ form(form) }}

表單渲染出來非常的干凈, 純 Form 元素.

<form name="form" method="post">
    <div id="form">
        <div>
            <label for="form_name" class="required">Name</label>
            <input type="text" id="form_name" name="form[name]" required="required" />
        </div>
        <div>
            <label for="form_email" class="required">Email</label>
            <input type="email" id="form_email" name="form[email]" required="required" />
        </div>
        <div>
            <label for="form_password" class="required">Password</label>
            <input type="password" id="form_password" name="form[password]" required="required" />
        </div>
        <div>
            <button type="submit" id="form_save" name="form[save]">Save</button>
        </div>
        <input type="hidden" id="form__token" name="form[_token]" value="OH_rtM7xZeK3f97MiwonQixEJza15Nm4i6nK8LPGCsE" />
    </div>
</form>

表單提交后, 可以打印到用戶輸入的數(shù)據(jù)是一個(gè)數(shù)組. 大概類似這樣:

[
    "name" => "Hill"
    "email" => "ssdf@sdf"
    "passwd" => "1212"
]

如果直接使用 {{ form(form) }} 這樣輸出是很丑的, 通常我們網(wǎng)頁美化是很重要的. 所以在創(chuàng)建表單的時(shí)候更多的是詳細(xì)輸出到設(shè)計(jì)好的 dom 結(jié)構(gòu)中去. 為了讓 sf 的 form 創(chuàng)建的表單和我們在之前靜態(tài)表單一致, 我們需要定制化輸出傳入到實(shí)體的表單對(duì)象. 把模板代碼改成下面的樣子:

{# template/default/sign-up.html.twig #}
{% extends 'base.html.twig' %}

{% block title %} Sign up {% endblock %}

{% block body %}
    <section class="main flex-grow-1">

        <div class="container h-100">
            <div class="row h-100">
                <div class="col-md-4 mx-auto d-flex flex-colum align-items-center">
                    <div class="form-box p-3 w-100 bg-white rounded shadow">

                        <!-- Form Start -->
                        <div class="logo mb-3">
                            <div class="col-md-12 text-center">
                                <h1>Sign Up</h1>
                            </div>
                        </div>

                        {{ form_start(form, {'method': 'POST', 'attr': {'novalidate': 'novalidate'}}) }}

                            <div class="form-group">
                                {{ form_label(form.name, 'Name', {'label_attr': {'class': 'small'}}) }}
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <i class="fas fa-user"></i>
                                        </div>
                                    </div>
                                    {{ form_widget(form.name, {'attr': {'class': 'form-control', 'placeholder': 'Enter name'}}) }}
                                </div>
                                <div class="text-danger small">{{ form_errors(form.name) }}</div>
                            </div>

                            <div class="form-group">
                                {{ form_label(form.email, 'Email address', {'label_attr': {'class': 'small'}}) }}
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <i class="far fa-envelope"></i>
                                        </div>
                                    </div>
                                    {{ form_widget(form.email, {'attr': {'class': 'form-control', 'placeholder': 'Enter email'}}) }}
                                    <!-- <input type="text" name="email" id="email" class="form-control" placeholder="Enter email"> -->
                                </div>
                                <div class="text-danger small">{{ form_errors(form.email) }}</div>
                            </div>

                            <div class="form-group">
                                {{ form_label(form.passwd, 'Password', {'label_attr': {'class': 'small'}}) }}
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <i class="fas fa-key"></i>
                                        </div>
                                    </div>
                                    {{ form_widget(form.passwd, {'attr': {'class': 'form-control', 'placeholder': 'Enter password'}}) }}
                                    <!-- <input type="password" name="password" id="password"  class="form-control" placeholder="Enter Password"> -->
                                </div>
                                <div class="text-danger small">{{ form_errors(form.passwd) }}</div>
                            </div>

                            <div class="form-group text-center ">
                                {{ form_widget(form.save, {'attr': {'class': 'btn btn-block mybtn btn-primary tx-tfm rounded-pill'}, 'label': 'Get Started For Free'}) }}
                                <!-- <input type="submit" class="btn btn-block mybtn btn-primary tx-tfm rounded-pill" value="Get Started For Free"> -->
                            </div>

                            <div class="form-group">
                                <div class="py-2 position-relative text-black-50">
                                    <hr style="height: 1px; margin-top: 0px; margin-bottom: 0px;">
                                    <span class="bg-white d-block position-absolute text-center" style="left: 50%; top: -5px; margin-left: -25px; width: 50px;">or</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <p class="text-center small">Already have an account? <a href="{{ path('url_login') }}">Sign in</a></p>
                            </div>

                        {{ form_end(form) }}
                        <!-- Form End -->

                    </div>
                </div>
            </div>
        </div>

    </section>
{% endblock %}

這樣一來, 表單就會(huì)按設(shè)計(jì)的結(jié)構(gòu)展現(xiàn), 符合預(yù)期要求. 這里使用了 form_start, form_end, form_label, form_widget 來拆開顯示表單.

現(xiàn)在來繼續(xù)了解 Symfony/form, 在控制器中. 表單使用 createFormBuilder()來創(chuàng)建, 在創(chuàng)建表單時(shí)候, 可以傳入一個(gè)實(shí)體對(duì)象, 這樣就會(huì)自動(dòng)把用戶提交的信息并入到實(shí)體對(duì)象中. 簡單的改造一下注冊的接口, 實(shí)現(xiàn)注冊信息保存到數(shù)據(jù)庫中, 然后返回首頁

// ...
    public function signUp(Request $request)
    {
        $user = new User();

        $formBuilder = $this->createFormBuilder($user);
        $formBuilder->add('name', TextType::class);
        $formBuilder->add('email', EmailType::class);
        $formBuilder->add('passwd', PasswordType::class);
        $formBuilder->add('save', SubmitType::class);
        $form = $formBuilder->getForm();

        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {

            $data = $form->getData();
            if (!$data instanceof User) {
                throw $this->createNotFoundException('Request page not founded.');
            }

            $data->setExpired(new \DateTime());
            $data->setResetPasswdExpired(new \DateTime());
            $data->setCreated(new \DateTime());

            $entityManager = $this->getDoctrine()->getManager();
            $entityManager->persist($data);
            $entityManager->flush();

            return $this->redirectToRoute('url_home');
            //dump($data);
        } else {
            dump($form->getErrors());
        }

        return $this->render('default/sign-up.html.twig', [
            'form' => $form->createView(),
        ]);
    }

最簡單的 Form 使用這樣就完成了. 接下來了解一下項(xiàng)目中非常重要的表單驗(yàn)證.