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

背景:在公司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');
});
}

后记:关于这次想法其实是需求方提出来的，我只是执行了而已，但是在实现的过程中，可以多思考，不要一下子就觉得不可能。

还有，yii的rule其实是支持自定义规则和场景的，还有怎么和validate跟好的结合这个也还没解决