Laravel InertiaJS应用中Naive UI表单实时验证配置求助

1. 初始化 Inertia Form #

在Vue组件中引入并初始化Inertia表单实例，定义需要验证的字段：

<script setup>
import { useForm } from '@inertiajs/vue3'
import { NForm, NFormItem, NInput, NButton, NMessage } from 'naive-ui'

// 初始化表单，设置字段默认值
const form = useForm({
  name: '',
  email: '',
  password: ''
})
</script>

2. 绑定 Naive UI 组件到表单 #

将Naive UI的表单组件与Inertia Form字段绑定，同时利用form.errors直接展示验证错误信息：

<template>
  <NForm>
    <!-- 用户名输入项 -->
    <NFormItem
      label="用户名"
      :error-message="form.errors.name"
      required
    >
      <NInput
        v-model:value="form.name"
        placeholder="请输入用户名"
        @blur="form.validate('name')"
      />
    </NFormItem>

    <!-- 邮箱输入项 -->
    <NFormItem
      label="邮箱"
      :error-message="form.errors.email"
      required
    >
      <NInput
        v-model:value="form.email"
        type="email"
        placeholder="请输入邮箱"
        @blur="form.validate('email')"
      />
    </NFormItem>

    <!-- 密码输入项 -->
    <NFormItem
      label="密码"
      :error-message="form.errors.password"
      required
    >
      <NInput
        v-model:value="form.password"
        type="password"
        placeholder="请输入密码"
        @blur="form.validate('password')"
      />
    </NFormItem>

    <!-- 提交按钮 -->
    <NButton
      type="primary"
      :loading="form.processing"
      @click="submitForm"
      :disabled="form.invalid"
    >
      提交
    </NButton>
  </NForm>
</template>

3. 实现实时验证 #

通过Vue的watch监听字段变化，实时触发单个字段的验证：

<script setup>
import { watch } from 'vue'

// 监听用户名变化，实时验证
watch(() => form.name, () => {
  if (form.name.trim()) form.validate('name')
})

// 监听邮箱变化，实时验证
watch(() => form.email, () => {
  if (form.email.trim()) form.validate('email')
})

// 监听密码变化，实时验证
watch(() => form.password, () => {
  if (form.password.trim()) form.validate('password')
})
</script>

4. 表单提交处理 #

编写提交函数，利用Inertia Form的post方法提交表单，并处理回调：

<script setup>
const submitForm = async () => {
  await form.post(route('users.store'), {
    onSuccess: () => {
      NMessage.success('提交成功')
      form.reset() // 重置表单
    },
    onError: () => {
      NMessage.error('提交失败，请检查表单内容')
    }
  })
}
</script>

5. 后端验证规则（Laravel） #

在Laravel控制器中设置验证规则，Inertia会自动将后端错误填充到form.errors：

public function store(Request $request)
{
    $validated = $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|email|unique:users',
        'password' => 'required|string|min:8',
    ]);

    // 执行用户创建等业务逻辑...

    return redirect()->route('users.index');
}

关键注意点 #

• Naive UI组件的v-model:value直接绑定到Inertia Form的对应字段
• form.errors.字段名可直接作为NFormItem的error-message属性值
• form.invalid判断表单是否存在错误，用于禁用提交按钮；form.processing表示提交状态，用于显示加载动画

内容的提问来源于stack exchange，提问作者Kingsley