yii2 modal彈窗之ActiveForm ajax表單異步驗證

做者:白狼 出處:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版權歸做者,歡迎轉載,但未經做者贊成必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接,不然保留追究法律責任的權利。php

前面咱們講述了yii2中如何使用modal以及yii2 gridview列表內更新操做如何使用modal的問題,本覺得modal要告一段落能夠開始新的話題了,可是實際問題每每超乎想像,這不modal彈窗提交的表單說是怎麼驗證的問題又出來了,又出來了!html

該問題的實質其實與modal的關係倒不大,其問題的核心在於ActiveForm的異步驗證上,解決了首要矛盾,咱們本篇文章的問題也就迎刃而解了。順便再叨嘮一句,modal確實沒啥好說了。後面如果有我再把話改回來。
web

yii2中,ActiveForm默認作了客戶端驗證,可是表單的提交,卻不是無刷新的。也就是經常看到的表單提交後頁面會刷新。若是想要開啓無刷新的模式,只須要在ActiveForm開始開啓enableAjaxValidation便可,像下面這樣ajax

<?php $form = ActiveForm::begin([
        'id' => 'form-id',
        'enableAjaxValidation' => true,
        'validationUrl' => Url::toRoute(['validate-form']),
    ]
); ?>

注意哦,id和enableAjaxValidation一個都不能少。後端

關於validateUrl咱們作一個說明。若是你不設置該參數,該地址默認是你當前路由,而又恰巧你當前路由就是表單form的action,你會很好奇的發現,當表單項input失去焦點的時候,你對數據的修改已經提交到後端進行了處理了?這每每不是咱們想要的,此時就須要給validateUrl設置一個路由地址,其所要請求的操做的意義就在於異步作驗證!咱們看具體實現:yii2

 

//表單提交操做,基本上不須要作改動
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異步無刷新表單驗證了!app

本期主題篇幅短小但內容精湛,但願對你有所幫助!yii

[考慮目前國內網站大部分採集文章十分頻繁,更有甚者不註明原文出處,原做者更但願看客們查看原文,以防有任何問題不能更新全部文章,避免誤導!]異步

查看原文post

相關文章
相關標籤/搜索