编辑“︁Next.js Yup验证”︁（章节）

= Next.js Yup验证 =

== 介绍 ==  
'''Yup''' 是一个流行的JavaScript模式验证库，常用于表单数据的验证。在Next.js应用中，结合Yup可以高效地处理表单验证逻辑，确保用户输入的数据符合预期格式。Yup提供了简洁的API，支持链式调用，并能定义复杂的验证规则。本教程将详细介绍如何在Next.js中使用Yup进行表单验证，涵盖基础语法、集成方法及实际案例。

== Yup基础语法 ==  
Yup通过定义'''schema'''（模式）来描述数据的验证规则。以下是一个简单的Yup验证示例：  

<syntaxhighlight lang="javascript">
import * as yup from 'yup';

// 定义验证规则
const userSchema = yup.object({
  username: yup.string().required('用户名不能为空'),
  email: yup.string().email('请输入有效的邮箱').required('邮箱不能为空'),
  age: yup.number().positive('年龄必须为正数').integer('年龄必须为整数'),
});
</syntaxhighlight>

'''输入与输出说明'''：  
- 若输入`{ username: '', email: 'invalid', age: -5 }`，Yup会返回错误：  
  ```  
  { username: '用户名不能为空', email: '请输入有效的邮箱', age: '年龄必须为正数' }  
  ```  
- 若输入合法数据（如`{ username: 'Alice', email: 'alice@example.com', age: 25 }`），则验证通过。

== 在Next.js中集成Yup ==  
通常，Yup与表单库（如React Hook Form或Formik）结合使用。以下是使用React Hook Form的示例：  

<syntaxhighlight lang="javascript">
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

const FormComponent = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(userSchema), // 绑定Yup验证规则
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username')} />
      {errors.username && <p>{errors.username.message}</p>}
      
      <input {...register('email')} />
      {errors.email && <p>{errors.email.message}</p>}
      
      <button type="submit">提交</button>
    </form>
  );
};
</syntaxhighlight>

== 实际应用案例 ==  
'''场景'''：用户注册表单，需验证以下字段：  
1. 密码长度至少8字符，且包含大小写字母和数字。  
2. 确认密码必须与密码一致。  

<syntaxhighlight lang="javascript">
const registerSchema = yup.object({
  password: yup
    .string()
    .matches(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/,
      '密码需包含大小写字母和数字，且长度≥8'
    ),
  confirmPassword: yup
    .string()
    .oneOf([yup.ref('password')], '两次密码不一致'),
});
</syntaxhighlight>

== 高级功能 ==  
Yup支持'''条件验证'''和'''异步验证'''。例如，根据用户选择的类型动态调整验证规则：  

<syntaxhighlight lang="javascript">
const dynamicSchema = yup.object({
  isStudent: yup.boolean(),
  school: yup.string().when('isStudent', {
    is: true,
    then: (schema) => schema.required('学生必须填写学校名称'),
  }),
});
</syntaxhighlight>

== 总结 ==  
Yup为Next.js表单验证提供了强大且灵活的工具，适合从简单到复杂的验证需求。通过链式语法和丰富的API，开发者可以轻松实现数据校验逻辑，提升用户体验和数据安全性。  

<mermaid>
graph TD
  A[用户提交表单] --> B{Yup验证}
  B -->|通过| C[提交数据到服务器]
  B -->|失败| D[显示错误信息]
</mermaid>

== 参见 ==  
* [[Next.js表单处理]]  
* [[React Hook Form集成]]  
* [[Yup官方文档]]

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js表单处理]]