Yii2創建表單（ActiveForm）

由於表單涉及到一些驗證方面的信息，屬性設置又比較多、比較複雜，所以哪裏有什麼不正確的地方請留言指點

目錄

• 表單的生成
• 表單中的方法
  
  • ActiveForm::begin()方法
  • ActiveForm::end()方法
  • getClientOptions()方法
  • 其它方法：errorSummary、validate、validateMultiple
    
• 表單中的參數
  
  • 表單form自身的屬性
  • 表單中各個項(field)輸入框相關的屬性
    
    • $fieldConfig
    • 關於驗證的屬性
    • 關於每個field容器樣式的屬性
      
  • ajax驗證
  • 前端js事件
  • 表單中的其它屬性
    

我們先看看Yii裏面最簡單的登錄表單以及生成的html代碼和界面，先有個直觀的瞭解

1. <?php $form = ActiveForm::begin(['id' => 'login-form']); ?>
   
2.    <?= $form->field($model, 'username') ?>
   
3.    <?= $form->field($model, 'password')->passwordInput() ?>
   
4.    <?= $form->field($model, 'rememberMe')->checkbox() ?>
   
5.    <div style="color:#999;margin:1em 0">
   
6.       If you forgot your password you can <?= Html::a('reset it', ['site/request-password-reset']) ?>
   
7.    </div>
   
8.    <div class="form-group">
   
9.          <?= Html::submitButton('Login', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
   
10.    </div>
    
11. <?php ActiveForm::end(); ?>

下面是生成的表單Html，我在裏面標明瞭5部分。

1、表單的生成
在Yii中表單即ActiveForm也是Widget，在上面可以看到是由begin開始

1. <?php $form = ActiveForm::begin(['id' => 'login-form']); ?>

中間爲各個項的輸入框，最後由end結尾

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

2、表單中的方法
在Widget中begin()方法會調用int方法

1. public function init()

在最後的end()方法會調用run方法

1. public function run()

1、ActiveForm::begin()方法

1. //這個是在執行 $form = ActiveForm::begin(['id' => 'login-form']); 中的begin方法的時候調用的
   
2. public function init()
   
3. {
   
4.          //設置表單元素form的id
   
5.         if (!isset($this->options['id'])) {
   
6.             $this->options['id'] = $this->getId();
   
7.         }
   
8.         //設置表單中間的要生成各個field的所使用的類
   
9.         if (!isset($this->fieldConfig['class'])) {
   
10.             $this->fieldConfig['class'] = ActiveField::className();
    
11.         }
    
12.         //這個就是輸出表單的開始標籤
    
13.         //如：<form id="login-form" action="/lulublog/frontend/web/index.php?r=site/login" method="post">
    
14.         echo Html::beginForm($this->action, $this->method, $this->options);
    
15. }

2、ActiveForm::end()方法

1. //這個是在執行 ActiveForm::end(); 中的end方法的時候調用的
   
2. public function run()
   
3. {
   
4.         //下面這個就是往視圖中註冊表單的js驗證腳本，
   
5.         if (!empty($this->attributes)) {
   
6.             $id = $this->options['id'];
   
7.             $options = Json::encode($this->getClientOptions());
   
8.             $attributes = Json::encode($this->attributes);
   
9.             $view = $this->getView();
   
10.             ActiveFormAsset::register($view);
    
11.             /*
    
12.              * $attributes:爲要驗證的所有的field數組。它的值是在activeform中創建field的時候，在field的begin方法中給它賦值的。
    
13.              * 其中每個field又是一個數組，爲這個field的各個參數
    
14.              * 比如username的field中的參數有
    
15.              * validate、id、name、
    
16.              * validateOnChange、validateOnType、validationDelay、
    
17.              * container、input、error
    
18.              *
    
19.              * $options:爲這個表單整體的屬性，如：
    
20.              * errorSummary、validateOnSubmit、
    
21.              * errorCssClass、successCssClass、validatingCssClass、
    
22.              * ajaxParam、ajaxDataType
    
23.              */
    
24.             
    
25.             $view->registerJs("jQuery('#$id').yiiActiveForm($attributes, $options);");
    
26.         }
    
27.         //輸出表單的結束標籤
    
28.         echo Html::endForm();
    
29. }

3、getClientOptions()方法

1. /*
   
2. * 設置表單的全局的一些樣式屬性以及js回調事件等
   
3. */
   
4. protected function getClientOptions()
   
5. {
   
6.         $options = [
   
7.             'errorSummary' => '.' . $this->errorSummaryCssClass,
   
8.             'validateOnSubmit' => $this->validateOnSubmit,
   
9.             'errorCssClass' => $this->errorCssClass,
   
10.             'successCssClass' => $this->successCssClass,
    
11.             'validatingCssClass' => $this->validatingCssClass,
    
12.             'ajaxParam' => $this->ajaxParam,
    
13.             'ajaxDataType' => $this->ajaxDataType,
    
14.         ];
    
15.         if ($this->validationUrl !== null) {
    
16.             $options['validationUrl'] = Url::to($this->validationUrl);
    
17.         }
    
18.         foreach (['beforeSubmit', 'beforeValidate', 'afterValidate'] as $name) {
    
19.             if (($value = $this->$name) !== null) {
    
20.                 $options[$name] = $value instanceof JsExpression ? $value : new JsExpression($value);
    
21.             }
    
22.         }
    
23. 
    
24.         return $options;
    
25. }

下面這個是生成的表單驗證Js代碼

1. jQuery(document).ready(function () {
   
2.         jQuery('#login-form').yiiActiveForm(
   
3.         {
   
4.                 "username":{
   
5.                         "validate":function (attribute, value, messages) {
   
6.                                 yii.validation.required(value, messages, {"message":"Username cannot be blank."});
   
7.                         },
   
8.                         "id":"loginform-username",
   
9.                         "name":"username",
   
10.                         "validateOnChange":true,
    
11.                         "validateOnType":false,
    
12.                         "validationDelay":200,
    
13.                         "container":".field-loginform-username",
    
14.                         "input":"#loginform-username",
    
15.                         "error":".help-block"},
    
16.                 "password":{
    
17.                         "validate":function (attribute, value, messages) {
    
18.                                 yii.validation.required(value, messages, {"message":"Password cannot be blank."});
    
19.                         },
    
20.                         "id":"loginform-password",
    
21.                         "name":"password",
    
22.                         "validateOnChange":true,
    
23.                         "validateOnType":false,
    
24.                         "validationDelay":200,
    
25.                         "container":".field-loginform-password",
    
26.                         "input":"#loginform-password",
    
27.                         "error":".help-block"
    
28.                         },
    
29. 
    
30.                 "rememberMe":{
    
31.                         "validate":function (attribute, value, messages) {
    
32.                                 yii.validation.boolean(value, messages, {
    
33.                                         "trueValue":"1","falseValue":"0","message":"Remember Me must be either \"1\" or \"0\".","skipOnEmpty":1});
    
34.                         },
    
35.                         "id":"loginform-rememberme",
    
36.                         "name":"rememberMe","validateOnChange":true,
    
37.                         "validateOnType":false,
    
38.                         "validationDelay":200,
    
39.                         "container":".field-loginform-rememberme",
    
40.                         "input":"#loginform-rememberme",
    
41.                         "error":".help-block"}
    
42.         },
    
43.         {
    
44.                 "errorSummary":".error-summary",
    
45.                 "validateOnSubmit":true,
    
46.                 "errorCssClass":"has-error",
    
47.                 "successCssClass":"has-success",
    
48.                 "validatingCssClass":"validating",
    
49.                 "ajaxParam":"ajax",
    
50.                 "ajaxDataType":"json"
    
51.         });
    
52. });

4、其它方法：errorSummary、validate、validateMultiple

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

它主要就是把model中的所有的錯誤信息彙總到一個div中。

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

這兩個是獲取錯誤信息的方法，比較簡單也不說了。

3、表單中的參數

1、表單form自身的屬性

• $action：設置當前表單提交的url地址，如果爲空則是當前的url
• $method：提交方法，post或者get，默認爲post
• $option：這個裏面設置表單的其它的屬性，如id等，如果沒有設置id，將會自動生成一個以$autoIdPrefix爲前綴的自動增加的id
  1.     //這個方法在Widget基本中
     
  2.     public function getId($autoGenerate = true)
     
  3.     {
     
  4.         if ($autoGenerate && $this->_id === null) {
     
  5.             $this->_id = self::$autoIdPrefix . self::$counter++;
     
  6.         }
     
  7. 
     
  8.         return $this->_id;
     
  9.     }

2、表單中各個項(field)輸入框相關的屬性

Yii生成的每個field由4部分組成：

• 最外層div爲每個field的容器，
• label爲每個field的文本說明，
• input爲輸入元素，
• 還有一個div爲錯誤提示信息。
  

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

$fieldConfig：這個是所有的field的統一的配置信息設置的屬性。也就是說在field類中的屬性都可以在這裏進行設置。

1. public function field($model, $attribute, $options = [])
   
2. {
   
3.         //使用fieldConfig和options屬性來創建field
   
4.         //$options會覆蓋統一的fieldConfig屬性值，以實現每個field的自定義
   
5.         return Yii::createObject(array_merge($this->fieldConfig, $options, [
   
6.             'model' => $model,
   
7.             'attribute' => $attribute,
   
8.             'form' => $this,
   
9. ]));
   
10. }

關於驗證的屬性：

• $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，則不會提交表單，格式爲：
  1. function ($form) {
     
  2.   ...return false to cancel submission...
     
  3. }
• $beforeValidate：在每個屬性在驗證之前觸發，格式爲：
  1. function ($form, attribute, messages) {
     
  2.   ...return false to cancel the validation...
     
  3. }
• $afterValidate：在每個屬性在驗證之後觸發，格式爲：
  1. function ($form, attribute, messages) {
     
  2. }

5、表單中的其它屬性

• $validateOnSubmit：提交表單的時候進行驗證
• $errorSummary：總的錯誤提示地方的樣式
• $attributes：這個屬性比較特殊，它是在創建field的時候，在field中爲這個form中的$attributes賦值的。這樣可以確保通過field方法生成的輸入表單都可以進行驗證