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：
  1. $form = ActiveForm::begin([
  2.     'id' => 'contact-form',
  3.     'enableAjaxValidation' => true,
  4. ]);
  1. 同时你需要在服务端添加接口处理AJAX校验。这段代码只是检查当前请求是否是AJAX以及是否为POST请求，如果是的话，我们会收到JSON格式的错误：
  1. if (Yii::$app->request->isAjax &&
  2. $model->load(Yii::$app->request->post())) {
  3.     Yii::$app->response->format = Response::FORMAT_JSON;
  4.     return ActiveForm::validate($model);
  5. }
  1. 修改SiteController中的actionContact()：
  1. <?php
  2. public function actionContact()
  3. {
  4.     $model = new ContactForm();
  5.     if (Yii::$app->request->isAjax &&
  6.         $model->load(Yii::$app->request->post())) {
  7.         Yii::$app->response->format = Response::FORMAT_JSON;
  8.         return ActiveForm::validate($model);
  9.     }
  10.     if ($model->load(Yii::$app->request->post()) && $model->contact(Yii::$app->params['adminEmail'])) {
  11.         Yii::$app->session->setFlash('contactFormSubmitted');
  12.         return $this->refresh();
  13.     } else {
  14.         return $this->render('contact', [
  15.             'model' => $model,
  16.         ]);
  17.     }
  18. }

工作原理…

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

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

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

AJAX校验器 - 图1

参考

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