Yii2的表单验证之一：客户端验证 [ 技术分享 ]

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

所谓客户端验证器，就是在HTML代码中使用JavaScript进行验证的验证器。

什么？你在Yii2中没有编写过客户端验证器！是的，那是因为Yii2帮你把客户端验证器自动生成了，让我们一起来看一看Yii2自动生成的客户端验证器长什么样子吧！ 上图是一个很简单的输入表单，需要用户输入姓名和年龄，注意看一下，现在表单的两个输入框是灰色的。

如上图，在“年龄”输入框中输入22，点击“提交”按钮后，“姓名”输入框变成了红色，并在其下方出现了一个提示信息：姓名不能为空。“年龄”输入框变为绿色，表示验证通过。这里就是Yii2客户端验证器实现的验证效果。 Tip：如果你看到的提示信息是“姓名 cannot be blank”，修改一下你的Yii2语言设置：

配置文件：\advanced\frontend\config\main.php

将：

    'language' => 'en',

修改为：

    'language' => 'zh-CN',

如上图，浏览器中，在“姓名不能为空。”文字上点击鼠标右键，在下拉框中选中“检查”就会在界面下方出现前端调试窗口（我使用的Chrome浏览器）。

如上图，在下方的前端调试窗口任意位置，点击一下鼠标左键，按Ctrl+f，会出现左下角红框所示的搜索框，输入“姓名不能为空”，你将会搜索出两个结果，点击搜索框右边的箭头，就可以查看到如图中蓝框所示的客户端验证器代码了。

我们仔细看一下这部分JavaScript代码：

<script type="text/javascript">jQuery(document).ready(function () {
jQuery('#w0').yiiActiveForm([{"id":"form1-name","name":"name","container":".field-form1-name","input":"#form1-name","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.required(value, messages, {"message":"姓名不能为空。"});yii.validation.string(value, messages, {"message":"姓名必须是一条字符串。","min":2,"tooShort":"姓名应该包含至少2个字符。","max":30,"tooLong":"姓名只能包含至多30个字符。","skipOnEmpty":1});}},{"id":"form1-age","name":"age","container":".field-form1-age","input":"#form1-age","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.required(value, messages, {"message":"年龄不能为空。"});yii.validation.number(value, messages, {"pattern":/^\s*[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?\s*$/,"message":"年龄必须是一个数字。","min":18,"tooSmall":"年龄的值必须不小于18。","max":60,"tooBig":"年龄的值必须不大于60。","skipOnEmpty":1});}}], []);
});</script>

这些JavaScript就是Yii2为我们自动生成的客户端验证器，正是通过它们，前端的表单验证工作才得以有效实现，而我们所需要做的就是去编写rules()中的验证规则即可。Yii2框架已为我们做好了大量基础工作！

好，现在我们就一起来看看rules()是怎么编写的吧！请仔细阅读代码中的注释。

    public function rules() {
        return [
            [['name','age'],'required'],//name,age是必填项'required'
			//name项是个字符串(string)，其长度不能少于2个字符，也不能多于30个字符
            ['name','yii\validators\StringValidator','min'=>2,'max'=>30,'enableClientValidation' =>true],//在一条规则中设置enableClientValidation可以控制此条验证规则的客户端验证是否生效，默认值是true
            //['name','string','min'=>2,'max'=>30],//与上句等效，'string'是验证器'yii\validators\StringValidator'的别名
			//age项必须是一个有效的整数(integer)，其值不能小于18，也不能大于60
            ['age','integer','min'=>18,'max'=>60],
        ];
    }

在本例中提到了'string'是验证器'yii\validators\StringValidator'的别名，Yii2提供了23个核心验证器，都是可以使用别名直接书写，非常简洁。 关于这23个核心验证器，请参阅文档： http://www.yiiframework.com/doc-2.0/guide-tutorial-core-validators.html

需要说明的是，这23个核心验证器，并不是都能够提供客户端验证功能的，比如：unique、exist等，这些验证器是需要在数据库中查询的验证器，在客户端当然是无法直接完成的了。当然，这些验证器通过Ajax技术也实现了仿客户端验证的良好效果。

客户端验证可以使用通过enableClientValidation来进行控制，默认值是true，即客户端验证默认是生效的。 enableClientValidation可以在三处进行设置： 1、在ActiveForm中对整个form进行设置，请参见源码中的注释 2、在ActiveField中对field进行单独设置，请参见源码中的注释 3、在Model的rules中对验证规则进行设置，请参见源码中的注释

本文所涉及到的程序源码：

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

<?php
namespace frontend\controllers;
use Yii;
class DemoController extends CommonController{
     public function actionForm1() {
        $model=new \frontend\models\Form1();
        if ($model->load(Yii::$app->request->post())) {
            if (Yii::$app->request->isAjax) {
                Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
                return \yii\bootstrap\ActiveForm::validate($model);
            }
            if($model->validate()){
                if ($model->save()) {
                    return $this->render('form1a',['model'=>$model]);
                }else{
                    $this->error('Sorry,Data save fail!');
                }
            }else{
                return $this->errorDisplay($model->getErrors());
            }
        }else{
            return $this->render('form1',['model'=>$model]);
        }
    }
}

其中errorDisplay()方法是调用自CommonController，请参见： http://www.yiichina.com/topic/6736

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

<?php
namespace frontend\models;
use Yii;
class Form1 extends \yii\base\Model{
    public $name,$age;
    public function attributeLabels() {
        return [
            'name'=>'姓名',
            'age'=>'年龄',
        ];
    }
    public function rules() {
        return [
            [['name','age'],'required'],//name,age是必填项'required'
			//name项是个字符串(string)，其长度不能少于2个字符，也不能多于30个字符
            ['name','yii\validators\StringValidator','min'=>2,'max'=>30,'enableClientValidation' =>true],//在一条规则中设置enableClientValidation可以控制此条验证规则的客户端验证是否生效，默认值是true
            //['name','string','min'=>2,'max'=>30],//与上句等效，'string'是验证器'yii\validators\StringValidator'的别名
			//age项必须是一个有效的整数(integer)，其值不能小于18，也不能大于60
            ['age','integer','min'=>18,'max'=>60],
        ];
    }
    public function save() {
        return true;
    }
}

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

<?php
use yii\bootstrap\ActiveForm;
use yii\helpers\Html;
$form = ActiveForm::begin([
	//在ActiveForm中设置enableClientValidation可以设置整个表单（form）的客户端验证是否生效，默认值是true；如果此值设置为false，则前端的js验证代码将不会再生成。
    'enableClientValidation' => true,	
    'layout' => 'horizontal',
]);
?>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <div class="panel-title">
                二、Yii2的表单验证——客户端验证的验证器
            </div>
        </div>
        <div class="panel-body" style="height:500px;">
			<!-- 在ActiveField中设置enableClientValidation可以控制field项的客户端验证是否生效，默认值是true -->
            <?=$form->field($model,'name',['enableClientValidation'=>true])->textInput()?>
            <?=$form->field($model,'age',['inputOptions'=>['class'=>'form-control']])->textInput()?>
            <div class="row">
                <div class='col-md-2 col-md-offset-4'><?= Html::submitButton('提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交', ['class' => 'btn btn-primary form-control']) ?></div>
                <div class='col-md-2 col-md-offset-1'><?= Html::resetButton('重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置', ['class' => 'btn btn-default form-control']) ?></div>
            </div>

        </div>
    </div>
<?php ActiveForm::end(); ?>

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

<?php
use yii\helpers\Html;
use yii\widgets\DetailView;
?>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <div class="panel-title">
                二、Yii2的表单验证——客户端验证的验证器(提交数据的显示)
            </div>
        </div>
        <div class="panel-body" style="height:500px;">
            <?php
            echo DetailView::widget([
                'model' => $model,
                'attributes' => [
                    'name:html',
                    'age',
                ],
                '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>

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

（全文完）