十三、yii表单进化史之 CActiveForm 数据验证

为什么80%的码农都做不了架构师？>>>   

再回过头去看views/user/active_from视图文件

我们就很能理解，这个挂件的作用就是生成了一个表单，然后调用这个挂件的某些方法渲染了一些输入框，下拉选项等等表单元素

CActiveForm挂件里面的一个极为有用的特性是它支持数据验证

支持三个层面的数据验证

服务器端验证，基于AJAX的验证，客户端验证

 

我们先来看服务器端的验证

说到验证，我们得知道，他是什么时候验证，通过什么验证，验证规则

我们拿必填项来进行说明

我们看到 当我什么都不填就提交的时候 就会出现如下错误

验证时通过控制器中$model->validate()方法时验证

验证的是User模型中的rules方法

rules方法里面定义了一个array('username', 'required'),

rules数组列表里面 第一个参数时要验证的字段，第二个参数是验证规则

required表示必填项，调用的验证器类时 CRequiredValidator，并且调用的验证方法是validateAttribute,$object是调用者的model对象($model)，attribute是属性（username）

//在验证逻辑中，它判断是否为空，如果为空则调用addError方法把错误信息添加到model的errors属性中，这样在active_form视图中，
<?php echo $form->error($model,'username'); ?> 就会输出对应字段的错误信息
<?php echo $form->errorSummary($model); ?> 就会输出所有的错误信息
    protected function validateAttribute($object,$attribute)
    {
        $value=$object->$attribute;
        if($this->requiredValue!==null)
        {
            if(!$this->strict && $value!=$this->requiredValue || $this->strict && $value!==$this->requiredValue)
            {
                $message=$this->message!==null?$this->message:Yii::t('yii','{attribute} must be {value}.',
                    array('{value}'=>$this->requiredValue));
                $this->addError($object,$attribute,$message);
            }
        }
        elseif($this->isEmpty($value,$this->trim))
        {
            $message=$this->message!==null?$this->message:Yii::t('yii','{attribute} cannot be blank.');
            $this->addError($object,$attribute,$message);
        }
    }

接下来我们看客户端验证

客户端验证需要开启activeform的配置参数

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'user-active_form-form',
    // Please note: When you enable ajax validation, make sure the corresponding
    // controller action is handling ajax validation correctly.
    // See class documentation of CActiveForm for details on this,
    // you need to use the performAjaxValidation()-method described there.
    'enableAjaxValidation'=>false,
    'enableClientValidation'=>true,//加上这行就开启了客户端js验证了
)); ?>

当我们再次刷新页面，可以看到，当光标聚焦用户名输入框又移动开之后会出现下图错误

打开debug我们可以看到 程序并没有向服务器发送请求，那么他是怎么实现验证的列

实际上它调用的是CRequiredValidator类的

clientValidateAttribute方法，如果有错误信息，会将错误信息json之后push到messages变量中

我们可以看到yii里面大多数的validate验证器类都会有一个相应的clientValidateAttribute方法，他们就是用来做客户端验证的

 

接下来我们再看基于ajax的验证

我们需要开启ajax验证的配置

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'user-active_form-form',
     // you need to use the performAjaxValidation()-method described there.
    'enableAjaxValidation'=>true,//开启ajax验证
    'enableClientValidation'=>false,//为了避免混淆我们把客户端验证先关掉
)); ?>

然后在控制器中定义一个ajax验证model的方法performAjaxValidation()

protected function performAjaxValidation($model){
        // uncomment the following code to enable ajax-based validation
 
        if(isset($_POST['ajax']) && $_POST['ajax']==='user-active_form-form')
        {
            echo CActiveForm::validate($model);
            Yii::app()->end();
        }
 
    }

然后在方法actionActiveform中调用此方法


再次刷新页面可以，不输入任何用户名信息，再移开光标

也会给我们提示错误

打开debug我们看到，它向服务器发送了一次ajax请求

开启ajax验证后，activeform的配置中有一个clientOptions属性可以用来控制ajax触发的时机

'enableClientValidation'=>false,
        'clientOptions'=>array(
            'validateOnSubmit'=>true,//开启表单提交onsubmit时验证，如果为false则提交表单时不会去验证
            'validateOnChange'=>false,//开启输入值被改变时onchange验证，如果为false，则输入值改变不会去验证
        ),

yii推荐我们尽可能的使用客户端验证

我们也可以使用ajax与客户端验证相结合

     'enableAjaxValidation' = >true,
     'enableClientValidation' = >true,

当ajax与客户端验证都开启时，默认的是验证所有的字段

有的时候我们可能对具体的某个字段需要开启ajax验证（比如：username），某个字段只需要开启客户端验证（比如：city_id）

我们也可以指定具体的某个字段是否需要ajax验证或者是客户端验证

CActiveForm的error方法有5个参数，第四个参数规定是否开启ajax验证，第5个参数规定是否开启客户端验证

public string error ( CModel $model, string $attribute, array $htmlOptions=array ( ), boolean $enableAjaxValidation=true, boolean $enableClientValidation=true)
//比如username 我们想开启ajax验证，不需要客户端验证，可以这样去配置
<?php echo $form->error($model,'username',array(),true,false); ?>
//比如city_id，我们只想开启客户端验证，可以这样去配置
<?php echo $form->error($model,'city_id',array(),false,true); ?>

至此 我们就了解了CActiveForm这个挂件了，yii推荐我们使用它去处理表单

转载于:https://my.oschina.net/lonxom/blog/168247