yii2 建立ActiveForm(表單)

表單的生成
表單中的方法

    ActiveForm::begin()方法
    ActiveForm::end()方法
    getClientOptions()方法
    其它方法：errorSummary、validate、validateMultiple

表單中的參數

    表單form自身的屬性
    表單中各個項(field)輸入框相關的屬性
        $fieldConfig
        關於驗證的屬性
        關於每一個field容器樣式的屬性
    ajax驗證
    前端js事件
    表單中的其它屬性

一、表單的生成
在Yii中表單即ActiveForm也是Widget，在上面能夠看到是由begin開始

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

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

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

複製代碼

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

    public function init()

複製代碼
在最後的end()方法會調用run方法

    public function run()

複製代碼

一、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);
    }

複製代碼

二、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();
    }

複製代碼

三、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;
    }

複製代碼

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

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

複製代碼

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

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

複製代碼
它主要就是把model中的全部的錯誤信息彙總到一個div中。

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

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

三、表單中的參數

一、表單form自身的屬性

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

                return $this->_id;
            }
    複製代碼


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

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

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

    <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：這個是全部的field的統一的配置信息設置的屬性。也就是說在field類中的屬性均可以在這裏進行設置。

    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,
    ]));
    }

複製代碼

關於驗證的屬性：

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



三、ajax驗證

    $validationUrl：ajax驗證的url地方
    $ajaxParam：url中的get參數，用來標明當前是ajax請求，默認值爲‘ajax’
    $ajaxDataType：ajax請求返回的數據格式


四、前端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) {
        }
    複製代碼


五、表單中的其它屬性

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

原文連接：http://www.yiifans.com/forum.php?mod=viewthread&tid=51