前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >yii2 modal弹窗之ActiveForm ajax表单异步验证

yii2 modal弹窗之ActiveForm ajax表单异步验证

作者头像
botkenni
发布2019-09-02 16:13:31
1.5K0
发布2019-09-02 16:13:31
举报
文章被收录于专栏:IT码农

前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题,本以为modal要告一段落可以开始新的话题了,但是实际问题往往超乎想像,这不modal弹窗提交的表单说是怎么验证的问题又出来了,又出来了!

该问题的实质其实与modal的关系倒不大,其问题的核心在于ActiveForm的异步验证上,解决了首要矛盾,我们本篇文章的问题也就迎刃而解了。顺便再叨唠一句,modal确实没啥好说了。后面若是有我再把话改回来。

yii2中,ActiveForm默认做了客户端验证,但是表单的提交,却不是无刷新的。也就是常常看到的表单提交后页面会刷新。如果想要开启无刷新的模式,只需要在ActiveForm开始开启enableAjaxValidation即可,像下面这样

代码语言:javascript
复制
<?php $form = ActiveForm::begin([
        'id' => 'form-id',
        'enableAjaxValidation' => true,
        'validationUrl' => Url::toRoute(['validate-form']),
    ]
); ?>

注意哦,id和enableAjaxValidation一个都不能少。

关于validateUrl我们做一个说明。如果你不设置该参数,该地址默认是你当前路由,而又恰巧你当前路由就是表单form的action,你会很好奇的发现,当表单项input失去焦点的时候,你对数据的修改已经提交到后端进行了处理了?这往往不是我们想要的,此时就需要给validateUrl设置一个路由地址,其所要请求的操作的意义就在于异步做验证!我们看具体实现:

代码语言:javascript
复制
//表单提交操作,基本上不需要做改动
if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['index']);
    }
}
return $this->render('create', [
    'model' => $model,
]);

// @see http://www.manks.top/yii2_modal_activeform_ajax.html
// 看主要的验证操作,该操作是表单字段失去焦点时异步验证,同时如果直接提交表单,也会先执行该操作进行验证
public function actionValidateForm () {
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    $model = new Model();   //这里要替换成自己的模型类
    $model->load(Yii::$app->request->post());  
    return \yii\widgets\ActiveForm::validate($model);  
}

如此一来就简单的实现了yii2异步无刷新表单验证了!

一般而言,上面的操作没有问题,但是总是会有特殊的人遇到特别的问题,问题突出,我们下面以一个案例进行说明:

有小伙伴遇到要验证的字段是unique类型,更新操作的时候,这可傻了眼了,怎么都处理不好了,我们下面给出一个针对字段unique规则更新操作的解决方案,但是同样兼容上面的案例说明。用下面的可能会好一点,万一你的字段也是unique的呢!

首先我们把ActiveForm的begin配置修改如下:

代码语言:javascript
复制
$validationUrl = ['validate-form'];
if (!$model->isNewRecord) {
    $validationUrl['id'] = $model->id;
}


$form = ActiveForm::begin([
    'id' => 'document-nav-form',
    'enableAjaxValidation' => true,
    'validationUrl' => $validationUrl,
]);

上面代码的意思很简单,如果是更新操作,请求验证的路由中把id也带过去,接着我们对validate-form方法也作相应的修改即可

代码语言:javascript
复制
public function actionValidateForm ($id = null) {
    
    $model = $id === null ? new DocumentNav() : DocumentNav::findOne($id);
    $model->load(Yii::$app->request->post());  

    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    return \yii\widgets\ActiveForm::validate($model);  
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档