首页 > 走进后端

改造yiiActiveForm.js使之可以实现分组验证

时间:2020-05-28|浏览次数:81次

Yii2项目中如果使用了ActiveForm,且有分组验证(类似下一步,下一步这种)的需求时,Yii2本身提供的yiiActiveForm.js是不支持的,我们需要改造此js,并使用改造的yiiActiveForm.js。

最近在yiichina中有人提问,我就顺便分享下改造后的js,并怎么使用,分三步。

一、定制自己的ActiveForm类

需要自己定制两个类,一个是即将引入自己定制的yiiActiveForm.js的资源类,一个是activeForm用于替换系统的类。

ActiveFormAsset资源类

// ActiveFormAsset.php

namespace common\widgets;

/**
 * ActiveFormAsset
 *
 * @author xiaopig <xiaopig123456@qq.com>
 * @since 1.0
 */
class ActiveFormAsset extends \yii\widgets\ActiveFormAsset
{
    // 自己定制的js资源存放的位置
    public $sourcePath = '@common/assets/js';
    
    // 自己定制的js名
    public $js = [
        'dookay.activeForm.js',
    ];
}

ActiveForm类

主要重载 registerClientScript方法,用于引入资源类,代码如下

// MyActiveForm.php

namespace common\widgets;

/**
 * ActiveFormWidget
 *
 * @author xiaopig <xiaopig123456@qq.com>
 * @since 1.0
 */
class MyActiveForm extends \yii\widgets\ActiveForm{

    /**
     * 重载此方法
     */
    public function registerClientScript()
    {
        $id = $this->options['id'];
        $options = \yii\helpers\Json::htmlEncode($this->getClientOptions());
        $attributes = \yii\helpers\Json::htmlEncode($this->attributes);
        $view = $this->getView();
        
        // 这里注册上面的资源包
        \common\widgets\ActiveFormAsset::register($view);
        
        
        $view->registerJs("jQuery('#$id').yiiActiveForm($attributes, $options);");
    }
}

二、改造yiiActiveForm.js

改造后,并重命名为上面提到的 dookay.activeForm.js这个名称,代码比较多,这里不贴出来了,自己下载后用工具比较。

改造后的js提供

groupValidate()

方法来进行局部验证,具体用法请看下面。

下载地址:

dookay.activeForm

三、在视图中使用

具体使用就很简单了,也Yii2的ActiveForm使用一样。

// 页面视图

<?php $form = \common\widgets\MyActiveForm::begin(['id'=>'js-form']);?>

    <div class="gorup-1">
        <? echo $form->field($model, 'name')->textInput(['maxlength' => 20]) ?>
    </div>
    <div class="gorup-2">...</div>
    <div class="gorup-3">...</div>

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

js中局部验证:

<script>

var activeForm = $("#js-form").data("yiiActiveForm");

activeForm.groupValidate($('.gorup-1'),function(validated){
    if(validated){
        alert('此区域下的表单控件已全部验证通过。');
    }else{
        alert('此区域下存在未通过验证的表单控件。');
    }
});
</script>