Explication détaillée de la méthode de création de formulaire Yii2 (ActiveForm)

L'exemple de cet article décrit la méthode de création d'un formulaire (ActiveForm) dans Yii2. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Étant donné que le formulaire implique des informations de vérification et que les paramètres d'attribut sont nombreux et complexes, donc s'il y a quelque chose d'incorrect, veuillez laisser un message

Répertoire

Génération du formulaire

Méthodes sous le formulaire
Méthode ActiveForm::begin()
Méthode ActiveForm::end()
getClientOptions() method
Autres méthodes : errorSummary, validate, validateMultiple

Paramètres du formulaire
Propriétés du formulaire lui-même
Propriétés liées aux zones de saisie de chaque élément (champ) du formulaire
$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 dans le formulaire

Allons regardons d'abord les plus simples dans Yii. Commençons par avoir une compréhension intuitive du formulaire de connexion ainsi que du code et de l'interface HTML générés

<?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() ?>
  <div 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;]) ?>
  </div>
  <div class="form-group">
     <?= Html::submitButton(&#39;Login&#39;, [&#39;class&#39; => &#39;btn btn-primary&#39;, &#39;name&#39; => &#39;login-button&#39;]) ?>
  </div>
<?php ActiveForm::end(); ?>

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

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

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

In. le milieu sont les entrées pour chaque élément, et enfin se termine par end

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

2. Méthodes sous la forme

Dans Widget, la méthode start() appellera la méthode int.

public function init()

à la fin La méthode end() appellera la méthode run

public function run()

1, méthode ActiveForm::begin()

//这个是在执行 $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);
}

<.>

2. Méthode ActiveForm::end()

//这个是在执行 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();
}

3. getClientOptions ()

/*
* 设置表单的全局的一些样式属性以及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;
}

Ce qui suit est le code Js de vérification du formulaire généré

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"
    });
});

4. Autres méthodes : errorSummary, validate, validateMultiple

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

Il résume principalement toutes les informations d'erreur dans le modèle dans un div.

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

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.

3. Paramètres du formulaire

1. Attributs du formulaire lui-même

$action : Définissez l'adresse URL de la soumission actuelle du formulaire. 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, il le sera automatiquement. générer un préfixe avec $autoIdPrefix L'identifiant ajouté automatiquement

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

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

Chaque champ généré par Yii est Il se compose de 4 parties :

① Le div le plus externe est le conteneur de chaque champ,

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

③ l'entrée est le élément d'entrée,
④ et A div est le message d'erreur.

<div 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]">
    <div class="help-block">Username cannot be blank.</div>
</div>

$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.

public function field($model, $attribute, $options = [])
{
    //使用fieldConfig和options属性来创建field
    //$options会覆盖统一的fieldConfig属性值，以实现每个field的自定义
    return Yii::createObject(array_merge($this->fieldConfig, $options, [
      'model' => $model,
      'attribute' => $attribute,
      'form' => $this,
]));
}

À propos des attributs de vérification :

① $enableClientValidation : s'il faut vérifier côté client, c'est-à-dire s'il faut générer un front -end script de vérification js (si Si la vérification ajax est définie dans le formulaire, ce script js sera également généré).

② $enableAjaxValidation : s'il s'agit d'une validation ajax

③ $validateOnChange : Valider lorsque la zone de saisie perd le focus et que la valeur change
④ $validateOnType : Valider lors de la saisie
⑤ $validationDelay : Délai de vérification , l'unité est en millisecondes

Ces 5 attributs peuvent être définis individuellement lors de la création de chaque champ, car ces 5 attributs sont disponibles dans la classe du champ.

À propos des attributs de chaque style de conteneur de champ :

$requiredCssClass : le style des éléments requis, la valeur par défaut est 'obligatoire'

$errorCssClass : le style des erreurs de vérification, la valeur par défaut la valeur est 'has-error'

$successCssClass : Vérifiez le style correct, la valeur par défaut est 'has-success'
$validatingCssClass : Le style pendant le processus de vérification, la valeur par défaut est 'validating'

3, vérification ajax

$validationUrl : emplacement de l'URL pour la vérification ajax

$ajaxParam : obtenir le paramètre dans l'url, utilisé pour indiquer que la requête ajax actuelle est, la valeur par défaut est 'ajax'

$ajaxDataType : retour de la demande ajax Format des données

4. Attribut d'événement js frontal

$beforeSubmit : événement avant de soumettre le formulaire Si false est renvoyé, le formulaire ne sera pas envoyé. soumis. Le format est :

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

$beforeValidate : Déclenché avant la validation de chaque attribut, le format est :

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

$afterValidate : Après chaque L'attribut est déclenché après vérification, et le format est :

function ($form, attribute, messages) {
}

5. Autres attributs sous la forme

$validateOnSubmit : Valider lors de la soumission du formulaire

$errorSummary : Le style de l'invite d'erreur générale

$attributes : Cet attribut est assez spécial. Il est attribué dans le champ aux $attributes de ce document. formulaire lors de la création du champ. Cela garantit que le formulaire de saisie généré via la méthode de champ peut être vérifié

J'espère que cet article sera utile à la conception de programmes PHP de chacun basé sur le framework Yii.

Pour des explications plus détaillées sur les méthodes de création de formulaire Yii2 (ActiveForm) et les articles connexes, veuillez faire attention au site Web PHP chinois !