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

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>