View on GitHub

yii2-cookbook-chinese

Yii Application Development Cookbook(Third Edition)中文翻译

AJAX校验器

有些校验只能在服务端进行,因为只有服务端有必要的信息。例如,为了验证公司的名称或者用户电子邮箱是唯一的,我们需要检查服务端相应的表格。在这个例子中,你应该使用内置AJAX校验器。Yii2支持AJAX表单验证,它本质上是将表单值发送到服务端进行验证,然后返回验证错误信息,而不离开页面。这个过程会在你每次离开或者修改字段时进行。

准备

按照官方指南http://www.yiiframework.com/doc-2.0/guide-start-installation.html的描述,使用Composer包管理器创建一个新的应用。

如何做…

  1. 在基础应用模板中,我们有一个简单的联系表单。你可以在这个页面http://yii-book.app/index.php?r=site/contact中看到。打开并修改相关的视图表单,@app/views/site/contact.php。为了激活表单的AJAX校验,在form配置中设置enableAjaxValidation选项为true
$form = ActiveForm::begin([
    'id' => 'contact-form',
    'enableAjaxValidation' => true,
]);
  1. 同时你需要在服务端添加接口处理AJAX校验。这段代码只是检查当前请求是否是AJAX以及是否为POST请求,如果是的话,我们会收到JSON格式的错误:
if (Yii::$app->request->isAjax &&
$model->load(Yii::$app->request->post())) {
    Yii::$app->response->format = Response::FORMAT_JSON;
    return ActiveForm::validate($model);
}
  1. 修改SiteController中的actionContact()
<?php
public function actionContact()
{
    $model = new ContactForm();
    if (Yii::$app->request->isAjax &&
        $model->load(Yii::$app->request->post())) {
        Yii::$app->response->format = Response::FORMAT_JSON;
        return ActiveForm::validate($model);
    }
    if ($model->load(Yii::$app->request->post()) && $model->contact(Yii::$app->params['adminEmail'])) {
        Yii::$app->session->setFlash('contactFormSubmitted');
        return $this->refresh();
    } else {
        return $this->render('contact', [
            'model' => $model,
        ]);
    }
}

工作原理…

先前的代码将会检查当前请求是否是AJAX。如果是的话,就会响应这个请求,运行校验以及返回JSON格式的错误。

你可以在服务端的调试面板中检查服务端的响应。尝试提交一个空表单然后你就会看到这个响应。

例如,在Google Chrome浏览器中,点击F12并选择开发工具条中的Network,你将会看到带有错误和消息的JSON数组:

参考

http://www.yiiframework.com/doc-2.0/guide-input-validation.html#ajaxvalidation