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 相关文章推荐
php中常用编辑器推荐
Jan 02 PHP
PHP 第三节 变量介绍
Apr 28 PHP
Fine Uploader文件上传组件应用介绍
Jan 06 PHP
PHP的switch判断语句的“高级”用法详解
Oct 01 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
May 23 PHP
Laravel搭建后台登录系统步骤详解
Jul 26 PHP
Laravel+jQuery实现AJAX分页效果
Sep 14 PHP
php使用变量动态创建类的对象用法示例
Feb 06 PHP
PHP守护进程化在C和PHP环境下的实现
Nov 21 PHP
PHP实现分布式memcache设置web集群session同步的方法
Apr 10 PHP
Laravel 6.2 中添加了可调用容器对象的方法
Oct 22 PHP
数据结构之利用PHP实现二分搜索树
Oct 25 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强制下载类型的实现代码
2011/04/21 PHP
mysql总结之explain
2012/02/27 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
orm获取关联表里的属性值
2016/04/17 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
pyside写ui界面入门示例
2014/01/22 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python 的描述符 descriptor详解
2016/02/27 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
SVM基本概念及Python实现代码
2017/12/27 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
兰兰过桥教学反思
2014/02/08 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
捐助感谢信
2015/01/22 职场文书
新生儿未入户证明
2015/06/23 职场文书