yii2 创建ActiveForm(表单)

表单的生成
表单中的方法

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

表单中的参数

表单form自身的属性
    表单中各个项(field)输入框相关的属性
        $fieldConfig
        关于验证的属性
        关于每个field容器样式的属性
    ajax验证
    前端js事件
    表单中的其它属性

1、表单的生成
在Yii中表单即ActiveForm也是Widget,在上面可以看到是由begin开始

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

复制代码
中间为各个项的输入框,最后由end结尾

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

复制代码

2、表单中的方法
在Widget中begin()方法会调用int方法

public function init()

复制代码
在最后的end()方法会调用run方法

public function run()

复制代码

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

复制代码

下面这个是生成的表单验证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"
            });
    });

复制代码

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

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

复制代码
它主要就是把model中的所有的错误信息汇总到一个div中。

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

复制代码
这两个是获取错误信息的方法,比较简单也不说了。

3、表单中的参数

1、表单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;
            }
    复制代码

2、表单中各个项(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’

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方法生成的输入表单都可以进

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

时间: 2024-08-27 10:32:01

yii2 创建ActiveForm(表单)的相关文章

yii2.0 Activeform表单部分组件使用方法

文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dropDownList(); 隐藏域:hiddenInput(); 文本域:textarea(['rows'=>3]); 文件上传:fileInput(); 提交按钮:submitButton(); 重置按钮:resetButtun(); <?php $form = ActiveForm::begi

yii2.0 Activeform表单部分组件使用方法 [ 2.0 版本 ]

文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dropDownList(); 隐藏域:hiddenInput(); 文本域:textarea(['rows'=>3]); 文件上传:fileInput(); 提交按钮:submitButton(); 重置按钮:resetButtun(); <?php $form = ActiveForm::begi

yii2自动生成表单

视图中: 1.要use的两个文件类 use yii\helpers\Html;   use yii\widgets\ActiveForm; 2.生成表单,以添加商品为例说明.注意红线区域:上传文件需要注意的地方一级表单中有textarea文本域的使用 yii2自动生成表单

Drupal创建自定义表单,上传文件代码

Drupal中创建自定义表单,用来上传文件,对上传文件做一些操作.以下是放在Module中的代码: 一.菜单建立表单路径 /** Implementation of hook_menu(). */ function moduleName_menu () { $items = array(); $items['admin/import'] = array( 'title' => 'title', 'page callback' => 'drupal_get_form', 'page argume

如何创建XHTML表单

首先奉上本菜曾经的作业--一张模仿智联招聘中的注册表单.虽然没有加样式显得很难看,但表单的基本要素已经具备了. 接下来进入正文,开始介绍各表单元素 form标签: 在创建表单时,第一步就是form标签.之后在form里添加各种你想要的表单元素.虽说不用form一样可以创建一个可以看的表单,但之后涉及到提交数据时就必须要用到form了. method为提前方式,有get和post两种,相比之下post更安全可靠,因为get方式会将用户填写的信息附在访问地址之后,具体原因之后的博文会更详细的阐述.

用JS动态创建登录表单,报了个小错误

后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各位仁兄美眉们一定要小心了额. 下面是这段js动态创建登录框的js代码: 1 onload = function () { 2 var dvObj = document.createElement('div'); 3 dvObj.style.border = 'Red 1px solid'; 4 dv

关于创建Django表单Forms继承BaseForm的问题

在创建Django表单时,因为需要验证用户输入的验证码是否正确,因此需要在session里提取当前验证码的值和POST提交过来的值进行比对,如图: 1 form.py 2 3 from django import forms 4 5 class LoginForms(forms.Form): 6 check_code = forms.CharField() 7 def clean_check_code(self): 8 if self.request.session.get('CheckCode

yii2的form表单用法

使用表单 本章节将介绍如何创建一个从用户那搜集数据的表单页.该页将显示一个包含 name 输入框和 email 输入框的表单.当搜集完这两部分信息后,页面将会显示用户输入的信息. 为了实现这个目标,除了创建一个[操作]和两个[视图]外,还需要创建一个[模型]. 贯穿整个小节,你将会学到: * 创建一个[模型](structure-models.md)代表用户通过表单输入的数据* 声明规则去验证输入的数据* 在[视图](structure-views.md)中生成一个 HTML 表单 创建模型 ?

【Java】向一个页面发送post请求并获取其处理之后的结果与用javascript创建一个表单后提交的安全性

本文对比与<[Java]读取网页中的内容>(点击打开链接)一文,向一个页面发送get请求,并获取其处理之后的结果,这里是向一个页面发送post请求,并获取其处理之后的结果.如果向一个页面发送get请求,并获取其处理之后的结果,只需要直接读取一个网页用?后接各种用&参数连接的参数即可,而向一个页面发送post请求,并获取其处理之后的结果,就不是这么简单了. 这里方法可能在普通的Java文件中不会太常见,但在jsp.安卓等javaweb的网页编程中却十分常用 import java.io.