Heim  >  Artikel  >  Tutorial zur Verwendung des Yii2-Frameworks: So erstellen Sie ein Formular

Tutorial zur Verwendung des Yii2-Frameworks: So erstellen Sie ein Formular

伊谢尔伦
伊谢尔伦Original
2017-07-04 11:35:102316Durchsuche

Freunde, die PHP noch nicht kennen. Jeder möchte ein Framework finden, mit dem man schnell lernen kann, wie man Projekte durchführt. Im Allgemeinen werde ich ThinkPHP zum Ausprobieren wählen. Dieses Framework ist nicht schwer zu starten und kann schnell eine Anwendung entwickeln. Geeignet für kleine Unternehmensanwendungen. Da es von Chinesen entwickelt wurde, ist der chinesische Support besser. Es gibt relativ umfassende Dokumente und auch die offizielle Website-Community ist relativ aktiv. Aber ab einem bestimmten Zeitpunkt sind Sie mit der Verwendung von ThinkPHP grundsätzlich nicht zufrieden und entscheiden sich für ein leistungsstarkes Entwicklungsframework. Yii verfügt über zahlreiche Funktionen, darunter MVC, DAO/ActiveRecord, I18N/L10N, Caching, Authentifizierung und rollenbasierte Zugriffskontrolle, Gerüstbau, Tests usw., die die Entwicklungszeit erheblich verkürzen können. Hier erfahren Sie auf unserer chinesischen PHP-Website, wie Sie Formulare mit dem yii2-Framework von Grund auf erstellen. Zunächst können Sie auf unsere chinesische PHP-Website gehen, um es online anzusehen

Yii2 Chinese Manual

Sie können auch zur

PHP-Website zum Herunterladen der chinesischen Website gehen, um Folgendes herunterzuladen: Yii2 Chinese Manual

Kommen wir zum Punkt der Erstellung des Formulars im yii2-Framework:

Inhaltsverzeichnis

Formulargenerierung

Methoden im Formular

ActiveForm::begin()-Methode

ActiveForm::end ()-Methode
getClientOptions()-Methode
Andere Methoden: errorSummary, validieren, validierenMultiple

Parameter im Formular

Formularformular
Selbstattribute Attribute im Zusammenhang mit Eingabefeld für jedes Element (Feld) im Formular $fieldConfig
Über die Attribute der Validierung
Über die Attribute jedes Feldcontainerstils
Ajax-Validierung
Front-End-JS-Ereignisse
Andere Attribute im Formular

Schauen wir uns zuerst Yii an. Es enthält das einfachste Anmeldeformular und den generierten HTML-Code und die Schnittstelle. Lassen Sie uns zunächst ein intuitives Verständnis haben

Das Folgende ist das generierte Formular-HTML, und ich habe darin 5 Teile markiert.
<?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. Formularerstellung

In Yii ist ein Formular sowohl ein ActiveForm als auch ein Widget, es beginnt mit begin

Die Mitte ist das Eingabefeld für jedes Element und endet mit end
<?php $form = ActiveForm::begin([&#39;id&#39; => &#39;login-form&#39;]); ?>

<?php ActiveForm::end(); ?>
2. Methoden in der Form

Im Widget der Anfang ()-Methode ruft die int-Methode auf

In der letzten end()-Methode wird die run-Methode aufgerufen
public function init()

public function run()
1. ) Methode

//这个是在执行 $form = ActiveForm::begin([&#39;id&#39; => &#39;login-form&#39;]); 中的begin方法的时候调用的
public function init()
{
    //设置表单元素form的id
    if (!isset($this->options[&#39;id&#39;])) {
      $this->options[&#39;id&#39;] = $this->getId();
    }
    //设置表单中间的要生成各个field的所使用的类
    if (!isset($this->fieldConfig[&#39;class&#39;])) {
      $this->fieldConfig[&#39;class&#39;] = 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. ActiveForm::end() Methode

//这个是在执行 ActiveForm::end(); 中的end方法的时候调用的
public function run()
{
    //下面这个就是往视图中注册表单的js验证脚本,
    if (!empty($this->attributes)) {
      $id = $this->options[&#39;id&#39;];
      $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(&#39;#$id&#39;).yiiActiveForm($attributes, $options);");
    }
    //输出表单的结束标签
    echo Html::endForm();
}
3

Das Folgende wird generiert

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

4. Andere Methoden: errorSummary, validieren, validierenMultiple
jQuery(document).ready(function () {
    jQuery(&#39;#login-form&#39;).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"
    });
});

Es geht hauptsächlich darum, alle

Fehlermeldungen
public function errorSummary($models, $options = [])
im Modell in einem p zusammenzufassen.

Diese beiden Methoden zum Erhalten von Fehlerinformationen sind relativ einfach und ich werde nicht auf Details eingehen.

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

3. Parameter im Formular

1. Attribute des Formulars selbst

$action: Legen Sie das aktuelle Formular fest Einreichung Die URL-Adresse, wenn sie leer ist, ist es die aktuelle URL$method: Methode senden, posten oder abrufen, der Standardwert ist post

$option: Andere Attribute des Formulars festlegen, z. B. ID usw ., wenn keine ID festgelegt ist, wird automatisch eine erhöhte ID mit dem Präfix $autoIdPrefix generiert



2. Attribute im Zusammenhang mit den Eingabefeldern jedes Elements (Felds) im Formular
//这个方法在Widget基本中
public function getId($autoGenerate = true)
{
    if ($autoGenerate && $this->_id === null) {
      $this->_id = self::$autoIdPrefix . self::$counter++;
    }
    return $this->_id;
}

Jedes von Yii generierte Feld besteht aus 4 Teilen:

① Das äußerste p ist der Container jedes Felds,

② label ist die Textbeschreibung jedes Felds und

③ Eingabe ist Eingabeelement,

④ Es gibt auch ein p für Fehlermeldung.


$fieldConfig: Dies ist das Attribut, das durch die einheitlichen Konfigurationsinformationen aller Felder festgelegt wird. Das heißt, hier können die Attribute im Feld Klasse gesetzt werden.

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

Über die Attribute der Verifizierung:

① $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框架搭建完整博客系统

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn