Yii2 AJAX表单校验需控制器返回标准JSON：验证通过返回{"valid":true}，失败返回{"errors":$model->getErrors()}，并设response格式为JSON；前端用jQuery处理响应，匹配字段名前缀，ActiveForm配置enableAjaxValidation=true。
Yii2 中使用 AJAX 异步校验表单，核心是让控制器返回标准 JSON 格式响应，前端通过 JavaScript 捕获并展示错误信息。关键在于：模型验证逻辑不变，只是响应格式改为 JSON，且需禁用 Yii 默认的 HTML 渲染流程。
控制器中正确返回 JSON 校验结果
在控制器动作里调用 $model->validate()，然后手动构造 JSON 响应，不走视图渲染：
- 设置响应头为
application/json - 若验证失败，返回包含
errors字段的对象，结构与 ActiveForm 默认 AJAX 校验兼容 - 若验证通过，返回
{"valid": true}或空数组均可（推荐{"valid":true}）
示例代码：
public function actionValidate()
{
$model = new UserForm();
$model->load(Yii::$app->request->post());
if ($model->validate()) {
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return ['valid' => true];
} else {
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return ['errors' => $model->getErrors()];
}
}
前端发起 AJAX 请求并处理响应
可直接用 jQuery 的 $.post，或绑定到 ActiveForm 的 beforeValidate / afterValidate 事件。注意字段名要与模型属性一致：
- 请求 URL 指向上面定义的
actionValidate - 发送的数据格式为
{'UserForm[username]': 'xxx', 'UserForm[email]': 'yyy'} - 成功回调中检查
data.errors，有则遍历插入对应字段的 error 元素；无则清除错误提示
简单示例：
$('#user-form').on('blur', 'input', function () {
const $input = $(this);
const name = $input.attr('name');
const value = $input.val();
$.post('/site/validate', { [name]: value }, function (data) {
if (data.errors && data.errors[name]) {
$input.next('.help-block').text(data.errors[name][0]).show();
} else {
$input.next('.help-block').hide();
}
});
});
确保 ActiveForm 不自动提交并启用客户端验证
在视图中配置 ActiveForm 时需显式关闭自动提交，并保留客户端基础校验（如 required、email）：
-
'enableAjaxValidation' => true启用 AJAX 校验（会自动监听 submit 和 blur） -
'enableClientValidation' => true保留 JS 端基础规则（提升体验） -
'validateOnSubmit' => false可选，避免提交时重复触发 - 确保表单
id与 JS 中选择器一致，且模型类名匹配字段前缀（如UserForm[username]）
调试常见问题
返回 JSON 但前端没反应？检查这几项：
- 浏览器控制台是否报 CORS 或 500 错误（查看 Network → XHR 响应内容）
- 返回的 JSON 是否合法（用 JSONLint 验证，特别注意中文乱码或 PHP 警告混入）
- 字段名是否带模型类前缀，例如
UserForm[phone]而非仅phone - 是否遗漏
Yii::$app->response->format = Response::FORMAT_JSON，导致输出 HTML 混入 JSON
