验证 Validation

未匹配的标注

它是如何工作的

Inertia 处理服务器端验证错误的工作方式与传统 ajax 驱动的表单略有不同,您可以从 422 响应中捕获验证错误并手动更新表单的错误状态。 这时因为 Inertia 永远不会接收 422 的响应。相反,Inertia 更像是标准的整页表单提交。以下是它如何做到的:

首先,您使用 Inertia 提交表单。在这期间如果出现服务器端验证错误, 您不会将这些错误作为 422 JSON 响应返回。相反,您需要(服务器端)重定向回您所在的表单页面,并在会话中刷新验证错误。一些诸如 Laravel 的框架会执行此操作。

接下来,只要会话中出现这些验证错误,它们就会自动与 Inertia 共享,使它们可用作客户端的页面道具,您可以在表单中显示这些道具。由于道具是响应性的,因此它们在表单完成时自动显示。

最后,由于 Inertia 应用程序从不会生成 422 响应,因此 Inertia 需要另一种方法来确定是否包含验证错误。要做到这一点,Inertia 会检查 page.props.errors 对象是否存在任何错误。如果出现错误,则会调用  onError() 回调,而不是 onSuccess() 回调。

共享错误

为了让您的服务器端验证错误能在客户端可用,您的服务器端框架必须通过 errors 道具进行共享。有些适配器(如 Laravel 适配器),会自动执行此操作。对于其它适配器,您可能需要手动去完成此操作。更多信息请参考您的具体服务器端适配器文档。

Laravel

class UsersController extends Controller
{
    public function create()
    {
        return Inertia::render('Users/Create');
    }

    public function store()
    {
      Request::validate([
          'first_name' => ['required', 'max:50'],
          'last_name' => ['required', 'max:50'],
          'email' => ['required', 'max:50', 'email'],
      ]);

      $user = User::create(
        Request::only('first_name', 'last_name', 'email')
      );

      return Redirect::route('users.show', $user);
    }
}

显示错误

由于验证错误在客户端作为页面组件道具可用,因此您可以根据它们存在的情况有条件地展示。下面是一个例子。

Vue 2 / Vue 3

<template>
  <form @submit.prevent="submit">
    <label for="first_name">First name:</label>
    <input id="first_name" v-model="form.first_name" />
    <div v-if="errors.first_name">{{ errors.first_name }}</div>
    <label for="last_name">Last name:</label>
    <input id="last_name" v-model="form.last_name" />
    <div v-if="errors.last_name">{{ errors.last_name }}</div>
    <label for="email">Email:</label>
    <input id="email" v-model="form.email" />
    <div v-if="errors.email">{{ errors.email }}</div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  props: {
    errors: Object,
  },
  data() {
    return {
      form: {
        first_name: null,
        last_name: null,
        email: null,
      },
    }
  },
  methods: {
    submit() {
      this.$inertia.post('/users', this.form)
    },
  },
}
</script>

注意,在 Vue 适配器中,您也可以通过 $page.props.errors 对象访问错误。

重新填充输入

虽然在 Inertia 中处理错误类似于全页面表单提交,但这种方法实际上要好的多,因为您不需要手动重新填充旧的表单输入数据。

当发生验证错误时,用户会被自动重定向回他们已经存在的表单页面。而且,默认情况,Inertia 会自动为 postputpatchdelete 请求保留组件状态。这意味着,所有旧表单输入数据都保持原样。

唯一改变的是 errors 属性,它现在包含验证错误。

错误保

对于具有多个表单页面,如果两个表单共享相同的字段名称,则在显示验证错误时可能会遇到冲突。例如,假设一个「创建公司」表单和一个「创建用户」表单都有一个 name 字段。由于两个表单都将显示 page.props.errors.name 验证错误,因此为任一表单中的 name 字段生成验证错误都会导致错误出现在两个表单中。

为了解决这个问题,您可以使用错误包。错误包将服务器返回的验证错误限定在特定于该表单的唯一键中。继续上面的示例,第一个表单可能有一个 createCompany 错误包,第二个表单有一个 createUser 错误包。

Inertia.post('/companies', data, {
  errorBag: 'createCompany',
})

Inertia.post('/users', data, {
  errorBag: 'createUser',
})

这样做会导致验证错误以 page.props.errors.createCompanypage.props.errors.createUser 的形式从服务器返回。

请注意,如果您使用 form helper,则无需使用错误包,因为验证错误会自动限定在形成对象。

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/inertia/0.11/va...

译文地址:https://learnku.com/docs/inertia/0.11/va...

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~