Tutoriel d'utilisation du framework Yii2 : Comment créer un formulaire

Amis nouveaux venus sur php. Tout le monde voudra trouver un cadre qui puisse être utilisé rapidement pour apprendre à réaliser des projets. D'une manière générale, je choisirai ThinkPHP pour essayer. Ce framework n'est pas difficile à démarrer et permet de développer rapidement une application. Convient aux applications des petites entreprises. Parce qu’il a été développé par des Chinois, le soutien chinois est meilleur. Il existe des documents relativement complets et la communauté du site officiel est également relativement active. Mais à un certain stade, vous n'êtes fondamentalement pas satisfait de l'utilisation de ThinkPHP et choisissez un framework de développement hautes performances. Yii est livré avec un riche ensemble de fonctionnalités, notamment MVC, DAO/ActiveRecord, I18N/L10N, la mise en cache, l'authentification et le contrôle d'accès basé sur les rôles, l'échafaudage, les tests, etc., qui peuvent réduire considérablement le temps de développement. Ici, notre site Web PHP chinois vous amènera à apprendre à créer des formulaires à l'aide du framework yii2 à partir de zéro. Tout d'abord, vous pouvez vous rendre sur notre site Web php chinois pour regarder en ligne

Manuel chinois Yii2

Vous pouvez également vous rendre sur

site de téléchargement du site Web chinois php pour télécharger : Manuel chinois Yii2

Passons au point de création du formulaire dans le framework yii2 :

Table des matières

Génération de formulaire

Méthodes sous la forme

Méthode ActiveForm::begin()

ActiveForm::end () méthode
méthode getClientOptions()
Autres méthodes : errorSummary, validate, validateMultiple

Paramètres du formulaire

Formulaire
Attributs lui-même Attributs liés à chaque zone de saisie d'élément (champ) sous la forme $fieldConfig
À propos des attributs de validation
À propos des attributs de chaque style de conteneur de champ
Validation Ajax
Événements js front-end
Autres attributs du formulaire

Jetons d'abord un coup d'œil à Yii. Il contient le formulaire de connexion le plus simple ainsi que le code et l'interface HTML générés. Ayons d'abord une compréhension intuitive

Ce qui suit est. le formulaire généré Html, et j'y ai marqué 5 parties.

<?php $form = ActiveForm::begin([&#39;id&#39; => &#39;login-form&#39;]); ?>
  <?= $form->field($model, &#39;username&#39;) ?>
  <?= $form->field($model, &#39;password&#39;)->passwordInput() ?>
  <?= $form->field($model, &#39;rememberMe&#39;)->checkbox() ?>
  <p style="color:#999;margin:1em 0">
   If you forgot your password you can <?= Html::a(&#39;reset it&#39;, [&#39;site/request-password-reset&#39;]) ?>
  </p>
  <p class="form-group">
     <?= Html::submitButton(&#39;Login&#39;, [&#39;class&#39; => &#39;btn btn-primary&#39;, &#39;name&#39; => &#39;login-button&#39;]) ?>
  </p>
<?php ActiveForm::end(); ?>

1. Génération de formulaire

Dans Yii, le formulaire est à la fois un ActiveForm et un Widget Comme vous pouvez le voir ci-dessus, il commence par start

<🎜. >

Le milieu est la zone de saisie pour chaque élément et se termine par la fin

<?php $form = ActiveForm::begin([&#39;id&#39; => &#39;login-form&#39;]); ?>

2. Méthodes sous la forme

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

Dans le widget, le début () appellera la méthode int

Dans la dernière méthode end(), la méthode run sera appelée

public function init()

1. ) méthode

public function run()

2. Méthode ActiveForm::end()

//这个是在执行 $form = ActiveForm::begin(['id' => 'login-form']); 中的begin方法的时候调用的
public function init()
{
    //设置表单元素form的id
    if (!isset($this->options['id'])) {
      $this->options['id'] = $this->getId();
    }
    //设置表单中间的要生成各个field的所使用的类
    if (!isset($this->fieldConfig['class'])) {
      $this->fieldConfig['class'] = ActiveField::className();
    }
    //这个就是输出表单的开始标签
    //如：<form id="login-form" action="/lulublog/frontend/web/index.php?r=site/login" method="post">
    echo Html::beginForm($this->action, $this->method, $this->options);
}

3.

//这个是在执行 ActiveForm::end(); 中的end方法的时候调用的
public function run()
{
    //下面这个就是往视图中注册表单的js验证脚本，
    if (!empty($this->attributes)) {
      $id = $this->options['id'];
      $options = Json::encode($this->getClientOptions());
      $attributes = Json::encode($this->attributes);
      $view = $this->getView();
      ActiveFormAsset::register($view);
      /*
       * $attributes:为要验证的所有的field数组。它的值是在activeform中创建field的时候，在field的begin方法中给它赋值的。
       * 其中每个field又是一个数组，为这个field的各个参数
       * 比如username的field中的参数有
       * validate、id、name、
       * validateOnChange、validateOnType、validationDelay、
       * container、input、error
       * 
       * $options:为这个表单整体的属性，如：
       * errorSummary、validateOnSubmit、
       * errorCssClass、successCssClass、validatingCssClass、
       * ajaxParam、ajaxDataType
       */
      $view->registerJs("jQuery('#$id').yiiActiveForm($attributes, $options);");
    }
    //输出表单的结束标签
    echo Html::endForm();
}

Le suivant Il est généréValidation du formulaire

Code Js

/*
* 设置表单的全局的一些样式属性以及js回调事件等
*/
protected function getClientOptions()
{
    $options = [
      'errorSummary' => '.' . $this->errorSummaryCssClass,
      'validateOnSubmit' => $this->validateOnSubmit,
      'errorCssClass' => $this->errorCssClass,
      'successCssClass' => $this->successCssClass,
      'validatingCssClass' => $this->validatingCssClass,
      'ajaxParam' => $this->ajaxParam,
      'ajaxDataType' => $this->ajaxDataType,
    ];
    if ($this->validationUrl !== null) {
      $options['validationUrl'] = Url::to($this->validationUrl);
    }
    foreach (['beforeSubmit', 'beforeValidate', 'afterValidate'] as $name) {
      if (($value = $this->$name) !== null) {
        $options[$name] = $value instanceof JsExpression ? $value : new JsExpression($value);
      }
    }
    return $options;
}

Autres méthodes : errorSummary, validate, validateMultiple

jQuery(document).ready(function () {
    jQuery('#login-form').yiiActiveForm(
    {
        "username":{
            "validate":function (attribute, value, messages) {
                yii.validation.required(value, messages, {"message":"Username cannot be blank."});
            },
            "id":"loginform-username",
            "name":"username",
            "validateOnChange":true,
            "validateOnType":false,
            "validationDelay":200,
            "container":".field-loginform-username",
            "input":"#loginform-username",
            "error":".help-block"},
        "password":{
            "validate":function (attribute, value, messages) {
                yii.validation.required(value, messages, {"message":"Password cannot be blank."});
            },
            "id":"loginform-password",
            "name":"password",
            "validateOnChange":true,
            "validateOnType":false,
            "validationDelay":200,
            "container":".field-loginform-password",
            "input":"#loginform-password",
            "error":".help-block"
            },
        "rememberMe":{
            "validate":function (attribute, value, messages) {
                yii.validation.boolean(value, messages, {
                    "trueValue":"1","falseValue":"0","message":"Remember Me must be either \"1\" or \"0\".","skipOnEmpty":1});
            },
            "id":"loginform-rememberme",
            "name":"rememberMe","validateOnChange":true,
            "validateOnType":false,
            "validationDelay":200,
            "container":".field-loginform-rememberme",
            "input":"#loginform-rememberme",
            "error":".help-block"}
    }, 
    {
        "errorSummary":".error-summary",
        "validateOnSubmit":true,
        "errorCssClass":"has-error",
        "successCssClass":"has-success",
        "validatingCssClass":"validating",
        "ajaxParam":"ajax",
        "ajaxDataType":"json"
    });
});

Il s'agit principalement de résumer tous les messages d'erreur

du modèle en une seule p.

public function errorSummary($models, $options = [])

Ces deux méthodes permettent d'obtenir des informations sur les erreurs, qui sont relativement simples et je n'entrerai pas dans les détails.

public static function validate($model, $attributes = null)
public static function validateMultiple($models, $attributes = null)

3. Paramètres dans le formulaire

1. Attributs du formulaire lui-même

$action : Définir le formulaire actuel. soumission L'adresse url, si elle est vide, c'est l'url actuelle$method : Méthode de soumission, post ou get, la valeur par défaut est post$option : Définissez d'autres attributs du formulaire, tels que l'identifiant, etc. ., si l'identifiant n'est pas défini, un identifiant automatiquement augmenté préfixé par $autoIdPrefix sera automatiquement généré

2. Attributs liés aux zones de saisie de chaque élément (champ) dans le formulaire

//这个方法在Widget基本中
public function getId($autoGenerate = true)
{
    if ($autoGenerate && $this->_id === null) {
      $this->_id = self::$autoIdPrefix . self::$counter++;
    }
    return $this->_id;
}

Chaque champ généré par Yii se compose de 4 parties : ① Le p le plus à l'extérieur est le conteneur de chaque champ,

② l'étiquette est la description textuelle de chaque champ, et

③ l'entrée est l'élément d'entrée,

④ Il y a aussi un p pour le message d'erreur.

$fieldConfig : Il s'agit de l'attribut défini par les informations de configuration unifiées de tous les champs. Autrement dit, les attributs de la classe field peuvent être définis ici.

<p class="form-group field-loginform-username required has-error">
    <label class="control-label" for="loginform-username">Username</label>
    <input type="text" id="loginform-username" class="form-control" name="LoginForm[username]">
    <p class="help-block">Username cannot be blank.</p>
</p>

À propos des attributs de vérification :

① $enableClientValidation：是否在客户端验证，也即是否生成前端js验证脚本（如果在form中设置了ajax验证，也会生成这个js脚本）。
② $enableAjaxValidation：是否是ajax验证
③ $validateOnChange：在输入框失去焦点并且值改变的时候验证
④ $validateOnType：正在输入的时候就进行验证
⑤ $validationDelay：验证延迟的时间，单位为毫秒

这5个属性都可以在创建每个field的时候单独设置，因为在field类中就有这5个属性。

关于每个field容器样式的属性：

$requiredCssClass：必填项的样式，默认为‘required'
$errorCssClass：验证错误的样式，默认值为‘has-error'
$successCssClass：验证正确的样式，默认值为‘has-success'
$validatingCssClass：验证过程中的样式，默认值为‘validating'

3、ajax验证

$validationUrl：ajax验证的url地方
$ajaxParam：url中的get参数，用来标明当前是ajax请求，默认值为‘ajax'
$ajaxDataType：ajax请求返回的数据格式

4、前端js事件属性

$beforeSubmit：在提交表单之前事件，如果返回false，则不会提交表单，格式为：

function ($form) {
 ...return false to cancel submission...
}

$beforeValidate：在每个属性在验证之前触发，格式为：

function ($form, attribute, messages) {
 ...return false to cancel the validation...
}

$afterValidate：在每个属性在验证之后触发，格式为：

function ($form, attribute, messages) {
}

5、表单中的其它属性

$validateOnSubmit：提交表单的时候进行验证
$errorSummary：总的错误提示地方的样式
$attributes：这个属性比较特殊，它是在创建field的时候，在field中为这个form中的$attributes赋值的。这样可以确保通过field方法生成的输入表单都可以进行验证

相关课程推荐：

1. 视频课程： 传智播客Yii开发大型商城项目视频教程

2. 视频课程： Yii2.0框架开发实战视频教程

3. 视频课程： Yii2框架搭建完整博客系统