Yii2的表单验证之三:Ajax验证

Yii2具有强大的表单验证功能,能用好表单验证,用户输入就基本掌握了,在这里我和各位聊聊Yii2的Ajax验证器

实际上,Yii2并没有Ajax验证器这个概念,只是为了便于描述使用Ajax方式进行的数据验证,我在这里单独提出的一个说法而已!

所谓的Ajax验证器,就是当enableAjaxValidation==true时在request->isAjax代码块中执行的验证器。

Ajax验证代码结构大概是这样:

if (Yii::$app->request->isAjax) {
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    $result = \yii\bootstrap\ActiveForm::validate($model);
    return $result;
}

这段代码通常存在于服务器端验证器(即$model->validate())之前,请参考后面的源码。

Ajax验证实际上就是由客户端触发,使用Ajax技术进行的服务器端验证,验证结果以客户端页面的局部刷新的方式展现出来,因Ajax验证良好的用户体验而被广泛使用。

先来看看Ajax验证是什么样的效果?

21.jpg

上图红框中就是Ajax验证的结果,在国家名称中输入了“France”,在其失去焦点(鼠标在页面空白的地方点击一下)后,输入框变为了红色,其下方也出现了错误提示信息。需要注意的是:这个错误提示信息是由服务器端验证后发送过来的动态结果,这与客户端验证器是不同的。
从上图右边的表格你也可以看到“France”这个国家在数据库中是已经存在的!
22.jpg

上图中在国家名称中输入了“Egypt”,在其失去焦点后,输入框变为了绿色,即Ajax验证通过。

Ajax验证器的定义

类似的,Ajax验证器与服务器端验证器、客户端验证器定义方式都是一样的——在rules()中定义:
public function rules() {
return [
[['countryName','countryAbbr','continent'], 'required'],
['continent','default','value'=>'Asia'],
//Ajax验证器,对'countryName'进行唯一性(unique)检测
[['countryName'], 'unique',
//Ajax验证要使用的AR(Active Record)类
'targetClass' => '\frontend\models\Country',
//Ajax验证时,'countryName'输入项对应于'name'字段进行验证(即对Country表中的'name'字段进行查询)
'targetAttribute' => ['countryName'=>'name']
],
[['countryAbbr'], 'unique','targetClass' => '\frontend\models\Country', 'targetAttribute' => ['countryAbbr'=>'code']],
];
}

要使上例代码中countryName验证规则成为真正的Ajax验证器,还需要在视图文件中对enableAjaxValidation进行设置。

在视图文件中对enableAjaxValidation进行设置有两个可选位置:
1、在ActiveField中对单项field进行设置
2、在ActiveForm中对整个表单进行设置
在此推荐第1种方法,即哪个表单项field需要Ajax验证时,就将它的enableAjaxValidation设置为true,这样避免触发不必要的Ajax请求,示例代码如下:

<?=$form->field($model,'countryName',['enableAjaxValidation'=>true])->textInput()?>

在Yii2中,ActiveFormenableAjaxValidation默认值是false,即整个表单的Ajax验证失效,但此时是可以针对field开启单项的Ajax验证的。

if (Yii::$app->request->isAjax) {
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    $result = \yii\bootstrap\ActiveForm::validate($model);
    return $result;
}

最后就是在ControllerAction中将上面这段代码添加到$model->validate()之前(请参考后面的源码),你的Ajax验证器就正式生效了!

本文所涉及到的程序源码

文件位置:D:\phpwork\advanced\frontend\controllers\DemoController.php

<?php
namespace frontend\controllers;
use Yii;
class DemoController extends CommonController{
     public function actionForm3() {
        $model=new \frontend\models\Form3();
        if ($model->load(Yii::$app->request->post())) {
            //是Ajax请求时才执行验证
            if (Yii::$app->request->isAjax) {
                //使用ActiveForm的validate()方法对$model的数据进行验证
                $result=\yii\bootstrap\ActiveForm::validate($model);
                Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;//设置返回客户端的结果使用json格式
                //将验证结果返回客户端
                return $result;
            }
            if($model->validate()){
                if ($model->save()) {
                    return $this->render('form3a',['model'=>$model]);
                }else{
                    return $this->error('Sorry,Data save fail!');
                }
            }else{
                return $this->errorDisplay($model->getErrors());
            }
        }else{
            $countries=\frontend\models\Country::find()->asArray()->all();
            return $this->render('form3',['model'=>$model,'countries'=>$countries]);
        }
    }
}

其中errorDisplay()方法是调用自CommonController,请参见:
http://www.jianshu.com/p/5d2c42166702

文件位置:D:\phpwork\advanced\frontend\models\Form3.php

<?php
namespace frontend\models;
use Yii;
class Form3 extends \yii\base\Model{
    public $countryName,$countryAbbr,$continent;
    public function attributeLabels() {
        return [
            'countryName'=>'国家名称',
            'countryAbbr'=>'简称',
            'continent'=>'大洲',
        ];
    }
    public function rules() {
        return [
            [['countryName','countryAbbr','continent'], 'trim'],
            [['countryName','countryAbbr','continent'], 'required'],
            ['continent','default','value'=>'Asia'],
            //Ajax验证器,对'countryName'进行唯一性(unique)检测
            [['countryName'], 'unique',
                //Ajax验证要使用的AR(Active Record)类
                'targetClass' => '\frontend\models\Country',
                //Ajax验证时,'countryName'输入项对应于'name'字段进行验证(即对Country表中的'name'字段进行查询)
                'targetAttribute' => ['countryName'=>'name']
            ],
            [['countryAbbr'], 'unique','targetClass' => '\frontend\models\Country', 'targetAttribute' => ['countryAbbr'=>'code']],
        ];
    }
    public function save() {
        return true;
    }
}

文件位置:D:\phpwork\advanced\frontend\views\demo\form3.php

<?php
use yii\bootstrap\ActiveForm;
use yii\helpers\Html;

?>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <div class="panel-title">
                三、Yii2的表单验证——Ajax验证的验证器
            </div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-7">
                    <?php
                    $form = ActiveForm::begin([
//                        'enableClientValidation' => false,
                        'enableClientValidation' => true,
//                        'enableAjaxValidation'=>true,//从性能考虑,避免将整个表单设置为Ajax验证
                        'enableAjaxValidation'=>false,//ActiveForm默认此值即为false,即整个表单的Ajax验证失效
                        'layout' => 'horizontal',
                    ]);
                    ?>
                    <!-- 对'countryName'进行Ajax验证,设置其enableAjaxValidation为true -->
                    <?=$form->field($model,'countryName',['enableAjaxValidation'=>true])->textInput()?>
                    <!-- 对'countryAbbr'进行Ajax验证,设置其enableAjaxValidation为true -->
                    <?=$form->field($model,'countryAbbr',['enableAjaxValidation'=>true])->textInput()?>
                    <?=$form->field($model,'continent')->textInput()?>
                    <div class="row">
                        <div class='col-md-2 col-md-offset-2'><?= Html::submitButton('提     交 ', ['class' => 'btn btn-primary form-control']) ?></div>
                        <div class='col-md-2 col-md-offset-2'><?= Html::resetButton('重     置 ', ['class' => 'btn btn-default form-control'])?></div>
                    </div>
                    <?php ActiveForm::end(); ?>
                </div>
                <div class="col-md-5">
                    <TABLE class="table table-bordered country">
                        <TR >
                            <TD style="width:60px;">序号</TD>
                            <TD>国家</TD>
                            <TD style="width:60px;">简称</TD>
                            <TD>大洲</TD>
                        </TR>
                        <?php
                        foreach ($countries as $k=>$item) {
                            echo '<TR><TD>'.($k+1).'</TD><TD>'.$item['name'].'</TD><TD>'.$item['code'].'</TD><TD>'.$item['continent'].'</TD></TR>';
                        }
                        ?>
                    </TABLE>
                </div>
            </div>
        </div>
    </div>

文件位置:D:\phpwork\advanced\frontend\views\demo\form3a.php

<?php
use yii\widgets\DetailView;
?>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <div class="panel-title">
                三、Yii2的表单验证——Ajax验证的验证器(提交数据的显示)
            </div>
        </div>
        <div class="panel-body" style="height:500px;">
            <?php
            echo DetailView::widget([
                'model' => $model,
                'attributes' => [
                    'countryName',
                    'countryAbbr',
                    'continent',
                ],
                'template' => '<tr><th class="text-right" style="width:150px;">{label}</th><td>{value}</td></tr>',
            ]);
            ?>
            <button onclick="history.back()" class="btn btn-default">返 回</button>
        </div>
    </div>

Country类是Yii2官网实例中的一个类,请参照官网文档自行构建。
本例涉及的数据库表country,比官网实例中多了一个字段:continent,手动加上亦可:

CREATE TABLE `country` (
  `code` CHAR(2) NOT NULL PRIMARY KEY,
  `name` CHAR(52) NOT NULL,
  `continent` CHAR(52) NOT NULL,
  `population` INT(11) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `country` VALUES ('AU','Australia',24016400,'Oceania');
INSERT INTO `country` VALUES ('BR','Brazil',205722000,'South America');
INSERT INTO `country` VALUES ('CA','Canada',35985751,'North America');
INSERT INTO `country` VALUES ('CN','China',1375210000,'Asia');
INSERT INTO `country` VALUES ('DE','Germany',81459000,'Europe');
INSERT INTO `country` VALUES ('FR','France',64513242,'Europe');
INSERT INTO `country` VALUES ('GB','United Kingdom',65097000,'Europe');
INSERT INTO `country` VALUES ('IN','India',1285400000,'Asia');
INSERT INTO `country` VALUES ('RU','Russia',146519759,'Europe');
INSERT INTO `country` VALUES ('US','United States',322976000,'North America');

欢迎深入阅读:
一处编写,三处运行的Yii2表单验证

(全文完)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容