Yii2表单ActiveForm部分表单组件样式自定义方法和ajax异步提交

2022年06月22日 阅读518次 分类:开发 标签:phpyii2教程

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1915.html

Yii2表单ActiveForm是一个非常方便的表单生成组件。可以把继承\yii\db\ActiveRecord的模型rules转换成js验证规则,这样开发者在写表单时就不需要添加前端验证了。

基本使用这里不做介绍,请看官方文档

全局配置

全局设置模板关键在fieldConfig属性。

<?php $form = ActiveForm::begin([
    // form标签配置
    'id'=>'my-form',
    'options' => ['class'=>'form-horizontal'],
    'action' => '',
    // 验证配置
    'validateOnBlur'=>false,
    'validateOnSubmit'=>true,
    'enableAjaxValidation'=>false, // 是否进行异步验证
    // 自定义全局模板
    'fieldConfig'=>[
        'options'=>[
            // 设置最外层div的类
            'class'=>'form-group',
            
            // 去除最外层div标签
            'tag' => false
        ],
        // 模板
        'template'=>'{label}\n{input}\n{hint}\n{error}',
        // 标签配置
        'labelOptions' => ['class' => 'control-label'],
        // input输入框配置
        'inputOptions'=>['class'=>'form-control'],
        // error错误配置
        'errorOptions'=>['class'=>''],
        // 提示配置
        'hintOptions'=>['class'=>''],
    ]
]);?>
    ...
    ...
<?php ActiveForm::end();?>

字段配置

单独的字段配置会覆盖全局的配置。

<?= $form->field($model,'username',[
    'options'=>[
        // 设置最外层div的类默认是class="form-group"
        'class'=>'flex-1 pr-10',
        // 去除最外层div标签
        'tag' => false
    ],
    // 设置模板
    'template'=>'{label}\n{input}\n{hint}\n{error}',
    // 标签配置,这里会覆盖全局,但会被下面的label覆盖
    'labelOptions'=>[],
    // input输入框配置,这里会覆盖全局,但会被下面textInput的配置覆盖
    'inputOptions'=>[].
])->textInput([
    // 设置input的类,默认是class="form-control",这里会覆盖field配置和全局配置,优先级最高
    'class'=>''
])->label('设置label名',[ 
    //labelOptions配置 ,这里的配置会覆盖field配置和全局配置,优先级最高 
]); ?>

验证码

验证码显示需要用到yii\captcha\Captcha类型,同事$model中rules需要对应字段为['字段名','captcha']。

<?=$form->field($model, 'captcha')
    ->widget(\yii\captcha\Captcha::className(), [
        // 验证码action
        'captchaAction' => '/site/captcha',
        // 验证码模板
        'template' => '{label}\n{input}\n{image}\n{hint}\n{error}',
        // 验证码图片配置
        'imageOptions'=>['class'=>'dk-code'],
        // 其他配置 同上字段配置
        'options'=>[],
        // ...
    ])
?>

单复选

请参看下面的相关文章“Yii2自定义checkboxList和radioList样式”;

异步提交

前端提交表单避免Ajax异步操作,这样可以有很好的用户的体验。

$('#my-form').on('beforeSubmit', function (e) {
    // 这里执行异步提交表单
}).on('submit', function (e) {
    e.preventDefault();
});


关联文章

(本篇完)

是不是学到了很多?可以

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1915.html