创建联系表单的页面

表单是网站与用户交互的重要方式。在这一个小结中，我们将学习如何创建联系表单，实现表单验证，处理表单提交，并使用 Server Actions 来处理服务器端逻辑。

创建联系表单的页面

步骤 1：创建基础表单结构

在我们正式实现完整的联系表单功能前，先来构建一个基础的表单框架。这个初始版本仅包含最核心的表单字段（如姓名、邮箱和消息内容），让你直观理解表单的结构和基本组件。

|
// app/contact/page.tsx
export default function ContactPage() {
  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4 max-w-2xl">
        <h1 className="text-4xl font-bold text-gray-900 mb-8">联系我们</h1>
        
        <form className="bg-white rounded-lg shadow-md p-8 space-y-6">
          <div>
            <label htmlFor="name" className="block text-sm font-semibold text-gray-700 mb-2">
              姓名
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              required
            />
          </div>
          
          <div>
            <label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
              邮箱
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              required
            />
          </div>
          
          <div>
            <label htmlFor="message" className="block text-sm font-semibold text-gray-700 mb-2">
              消息
            </label>
            <textarea
              id="message"
              name="message"
              rows={6}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              required
            ></textarea>
          </div>
          
          <button
            type="submit"
            className="w-full bg-blue-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors"
          >
            发送消息
          </button>
        </form>
      </div>
    </div>
  )
}

这是一个基础的 HTML 表单，使用了 Tailwind CSS 进行样式设计。目前它只是一个静态表单，还没有处理用户输入和提交的逻辑。

步骤 2：添加 React 状态管理

为了让表单能够响应用户输入，我们需要使用 React 的 useState Hook 来管理表单数据。注意这里需要添加 'use client' 指令，因为我们需要使用客户端功能：

|
'use client'
 
import { useState } from 'react'
 
export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  })
  
  const handleChange = (e: React.ChangeEvent

现在表单可以捕获用户输入了。我们使用 useState 来存储表单数据，并通过 handleChange 函数更新状态。当用户提交表单时，handleSubmit 函数会阻止默认的表单提交行为，并打印出表单数据。

步骤 3：添加表单验证和错误处理

为了确保用户能够顺利填写并提交表单，我们接下来将为联系表单添加详细的表单验证功能。具体来说，我们会实现以下几点：

输入校验：在用户输入时实时检测每个字段的有效性（如姓名不能为空，邮箱格式正确，消息内容不小于一定字数）。
即时反馈：如果用户的输入不符合要求，会在对应的输入框下方立刻显示出详细且清晰的错误提示，帮助用户快速发现并纠正问题。
提交校验：在表单提交时统一再次校验所有字段，只有全部通过校验后才允许发送数据，避免无效或不完整的信息提交到后台。
用户体验优化：通过合理的交互和提示，提高表单的易用性和专业感，降低用户操作的疑惑和焦虑感。

|
'use client'
 
import { useState } from 'react'
 
interface FormErrors {
  name?: string
  email?: string
  message?: string
}
 
export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',

当用户输入时，会清除对应字段的错误；提交时会验证所有字段，并在有错误时显示错误信息。同时，我们还添加了 isSubmitting 状态来防止重复提交。

步骤 4：使用 Server Actions 处理表单提交

Server Actions 是 Next.js 14+ 引入的功能，允许你在服务器端处理表单提交，无需创建 API 路由。让我们创建一个 Server Action 来处理表单提交：首先，创建 Server Action 文件：

|
// app/actions/contact.ts
'use server'
 
export async function submitContactForm(formData: FormData) {
  const name = formData.get('name') as string
  const email = formData.get('email') as string
  const message = formData.get('message') as string

然后在表单组件中使用 Server Action。注意，使用 Server Actions 时，我们可以直接使用表单的 action 属性，而不需要手动处理 onSubmit：

|
'use client'
 
import { useState } from 'react'
import { submitContactForm } from '@/app/actions/contact'
 
export default function ContactPage() {
  const [status, setStatus] = useState<{ success: boolean; message?: string; error?: string } | null>(null)

Server Actions 的优势在于类型安全、无需 API 路由，并且能够自动处理 CSRF 保护。这使得表单处理更加简单和安全。

完整的联系表单代码

接下来，我们将详细讲解集成了所有关键特性的联系表单完整实现代码。下面的代码不仅涵盖了 React 状态管理、表单各字段的实时验证、错误提示、提交结果反馈（如发送成功或失败），而且安全高效地利用了 Next.js 的 Server Actions 处理服务端逻辑。

|
'use client'
 
import { useState } from 'react'
import { submitContactForm } from '@/app/actions/contact'
 
export default function ContactPage() {
  const [status, setStatus] = useState<{ success: boolean; message?: string; error?: string } | null>(null)

下一步

在这一小结中，我们学习了如何创建联系表单，包括状态管理、表单验证、错误处理和 Server Actions。这样用户终于有地方可以联系我们了。你可能觉得我们已经有了一个功能完全的网站了，但并不是这样的，如果你想让别人更有可能的搜索出你的网站，你需要做一些SEO优化，这将是我们马上就要接触到的。