Yii2.0关于在客户端动态的添加或删除字段后，客户端验证的正确处理方式

最近开始学习Yii，记录一些使用中的小技巧

问题：在开发中，经常遇见的问题就是客户端的表单的数量是动态的变化的，而使用JS添加或删除的字段，会存在一个很重要的问题：客户端新增的字段或删除的字段的客户端验证并没有进行验证？

这里我给也是参考了，yii的权威指南，然后进行的一些尝试，很庆幸，新添加的字段可以实现原表单字段一模一样的验证效果。
1. 在view中，代码如下

<?php
/**
* User: Agent 3650
* Date: 2018/4/11
* Time: 10:25
*/
use yii\helpers\Html;
use yii\widgets\ActiveForm;
$this->title = 'Create';
$this->registerJsVar('index',count($settings));
$this->registerJs("
//点击添加按钮
$('body').find('a.add-column').click(function(){
//更新页面的元素
//1.按照原页面的结构添加一个新的字段
var html = \"<tr>\" +
\"<th scope='row'>\"+(index+1)+\"</th>\" +
\"<td><div class='form-group field-settings-\"+index+\"-name required'>\" +
\"<input type='text' id='settings-\"+index+\"-name' class='form-control' name='Settings[\"+index+\"][ name ]'>\" +
\"<div class='help-block'></div>\" +
\"</div></td>\" +
\"<td><div class='form-group field-settings-\"+index+\"-value required'>\" +
\"<input type='text' id='settings-\"+index+\"-value' class='form-control' name='Settings[\"+index+\"][ value ]'>\" +
\"<div class='help-block'></div>\" +
\"</div></td>\" +
\"<td><a class='add-column' href='javascript:;'>添加</a></td>\" +
\"</tr>\";
//将拼接好的表单结构加入到tbody中
$('table.table-striped').find('tbody').append(html);
//2.然后加入新的字段的验证信息，这里可以参考表单自动生成的那部分JS然后copy下来改改就行了，这样子可以保证新添加的字段和之前的字段的验证规则是一模一样的(客户端验证)
$('#my-form').yiiActiveForm('add', {
\"id\": \"settings-\"+index+\"-name\",
\"name\": \"[\"+index+\"]name\",
\"container\": \".field-settings-\"+index+\"-name\",
\"input\": \"#settings-\"+index+\"-name\",
\"validate\": function (attribute, value, messages, deferred, \$form) {
yii.validation.required(value, messages, {\"message\": \"Name cannot be blank.\"});
yii.validation.string(value, messages, {
\"message\": \"Name must be a string.\",
\"max\": 25,
\"tooLong\": \"Name should contain at most 25 characters.\",
\"skipOnEmpty\": 1
});
}
});
$('#my-form').yiiActiveForm('add',{
\"id\": \"settings-\"+index+\"-value\",
\"name\": \"[\"+index+\"]value\",
\"container\": \".field-settings-\"+index+\"-value\",
\"input\": \"#settings-\"+index+\"-value\",
\"validate\": function (attribute, value, messages, deferred, \$form) {
yii.validation.required(value, messages, {\"message\": \"Value cannot be blank.\"});
yii.validation.string(value, messages, {
\"message\": \"Value must be a string.\",
\"max\": 25,
\"tooLong\": \"Value should contain at most 25 characters.\",
\"skipOnEmpty\": 1
});
}
});
console.log(index);
index++;
});",\yii\web\View::POS_END,'dysc');
echo "<h2>$msg</h2>";
$form = ActiveForm::begin(['options' => ['id'=>'my-form']]);
?>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Value</th>
<th><?= Yii::t('yii', 'action') ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($settings as $index => $setting): ?>
<tr>
<th scope="row"><?= ($index + 1) ?></th>
<td><?= $form->field($setting, "[$index]name")->label(false) ?></td>
<td><?= $form->field($setting, "[$index]value")->label(false) ?></td>
<td><?= Html::a("添加", 'javascript:;', ['class' => 'add-column']) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?= Html::submitButton('保存', ['class' => 'btn btn-primary']) ?>
<?php ActiveForm::end(); ?>

2. 到这里就ok啦，是不是很简单

1. 最后我还是把后端的代码也贴出来吧