Yii2创建表单(ActiveForm)方法详解


Posted in PHP onJuly 23, 2016

本文实例讲述了Yii2创建表单(ActiveForm)的方法。分享给大家供大家参考,具体如下:

由于表单涉及到一些验证方面的信息,属性设置又比较多、比较复杂,所以哪里有什么不正确的地方请留言指点

目录

表单的生成

表单中的方法
  ActiveForm::begin()方法
  ActiveForm::end()方法
  getClientOptions()方法
  其它方法:errorSummary、validate、validateMultiple

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

我们先看看Yii里面最简单的登录表单以及生成的html代码和界面,先有个直观的了解

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

下面是生成的表单Html,我在里面标明了5部分。

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

希望本文所述对大家基于Yii框架的PHP程序设计有所帮助。

PHP 相关文章推荐
如何分别全角和半角以避免乱码
Oct 09 PHP
PHP生成网页快照 不用COM不用扩展.
Feb 11 PHP
php站内搜索并高亮显示关键字的实现代码
Dec 29 PHP
解析PHP中如何将数组变量写入文件
Jun 06 PHP
PHP的cURL库简介及使用示例
Feb 06 PHP
PHP面向对象自动加载机制原理与用法分析
Oct 14 PHP
Yii框架分页实现方法详解
May 20 PHP
详解PHP5.6.30与Apache2.4.x配置
Jun 02 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
Apr 27 PHP
对php 判断http还是https,以及获得当前url的方法详解
Jan 15 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
Aug 27 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
Dec 04 PHP
Yii2验证器(Validator)用法分析
Jul 23 #PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
Jul 23 #PHP
Yii2简单实现多语言配置的方法
Jul 23 #PHP
yii2控制器Controller Ajax操作示例
Jul 23 #PHP
PHP实现清除MySQL死连接的方法
Jul 23 #PHP
php实现批量修改文件名称的方法
Jul 23 #PHP
golang与PHP输出excel示例
Jul 22 #PHP
You might like
PHP 危险函数解释 分析
2009/04/22 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
php实现删除空目录的方法
2015/03/16 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
2014庆六一活动方案
2014/03/02 职场文书
《忆江南》教学反思
2014/04/07 职场文书
政府会议通知范文
2015/04/15 职场文书
老员工辞职信范文
2015/05/12 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
如何优化vue打包文件过大
2022/04/13 Vue.js