yii 2.0 自带验证与jquery validate结合的一次尝试

最新推荐文章于 2023-06-26 09:07:25 发布

栋栋也疯狂

最新推荐文章于 2023-06-26 09:07:25 发布

阅读量1.3k

点赞数

分类专栏： jquery 文章标签： validate

本文链接：https://blog.csdn.net/a413883127/article/details/51931665

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

背景:在公司DMS系统，使用的是Yii 2.0的框架，而前端验证使用的是validate，之前的做法是在前端验证完以后，数据传到后端，自己写验证，大概就是这种画风

//php页面
if (empty($data['chinese_name'])) {
    exit($this->jsonFailedResponse('中文名称不能为空'));
}
if (empty($data['foreign_name'])) {
    exit($this->jsonFailedResponse('外文名称不能为空'));
}
if (empty($data['company_id'])) {
    exit($this->jsonFailedResponse('公司不能为空'));
}
if (empty($data['brand_id'])) {
    exit($this->jsonFailedResponse('品牌不能为空'));
}           
if (empty($data['mp_serial_id'])) {
    exit($this->jsonFailedResponse('系列不能为空'));
}
if (empty($data['weight'])) {
    exit($this->jsonFailedResponse('重量不能为空'));
}
if (empty($data['package'])) {
    exit($this->jsonFailedResponse('请选择包装'));
}

//前端js页面
if ('succeed' == r.status) {
    if (url!='') {
        common_layer(r.message, url);
    } else {
        common_layer(r.message,document.referrer);
    }
} else {
    //不刷新
    if (empty(r.message) && !empty(r.data)) {
        showRuleErrors(r.data);
    } else {
        common_layer(r.message);
    }

}

看起来是挺整齐的，但是其实很不合理，首先在后端，yii本来就有rules的验证，在前端，本来使用validate来提示，后面又使用layer的弹出来提示，给人一种很不统一的感觉。
两个问题，首先解决后端的问题，解决方案:使用Yii自带的验证,首先写model

<?php


class MbProduct extends \app\core\base\BaseActiveRecord {

    public static function tableName(){
        return 'mb_product';
    }

    //关键在这里,在这里写规则，return 里面写数组，第一个参数是字段,第二个是参数规则，第三个参数是错误信息
    public function rules(){
        return [
            [['overall_height', 'bottle_height', 'diameter', 'volume', 'weight'], 'number','message'=>'必须为数字'],
           [['brand_id','sell_area_id','made_area_id'], 'required', 'message' => '请选择'],
        ];
    }

}

使用

//实例化model
$model = new XXX()
//把要保存的值赋给model
$model->attributes = $data;
//验证
if ($model->validate()) {
    //通过rules验证
    if ($model->save()) {
        return ['code'=>'1','model'=>$model];
    } 
    return ['code'=>'0'];
} else {
    //没通过
    return ['code'=>'2','error'=>$model->getErrors()];
}

这样的话，就不用自己写验证了，但是要怎么和validate结合起来呢，关键在于$model->getErrors()的返回信息

[chinese_name] => Array ( [0] => 该产品已经存在! ) )

可以看到，有字段名字和错误信息，那么就简单了，只要返回给前端,交给js的validate就可以了

//js
//接收后端验证的错误信息，模拟jQueryvalidate弹出错误信息(需要配和yii的rules使用)
//这里的error这个参数就是后端返回来的信息,我这里不是直接调用validate的api，直接自己写了提示
var showRuleErrors = function(error) {
    $.each(error, function(index, val) {
        var input_id = index;
        $('#'+input_id).attr({
            "aria-describedby" : input_id + "-error",
        }).after('<span id="'+input_id+'-error" class="help-block m-b-none">'+val+'</span>').parents('.form-group').addClass('has-error');
    });
}