กฎการตรวจสอบและข้อความแสดงข้อผิดพลาด

ยินดีต้อนรับ

กฎการตรวจสอบที่มีมาให้

<input
  {...register('email', {
    required: 'Email is required',
    pattern: {
      value: /^[^@]+@[^@]+\.[^@]+$/,
      message: 'Invalid email address',
    },
  })}
/>

ฟิลด์ที่จำเป็น

register('name', { required: 'Name is required' })
// or
register('name', { required: true })

ข้อจำกัดด้านความยาว

register('username', {
  minLength: { value: 3, message: 'At least 3 characters' },
  maxLength: { value: 20, message: 'At most 20 characters' },
})

การตรวจสอบด้วยรูปแบบ

register('phone', {
  pattern: {
    value: /^[0-9]{10,11}$/,
    message: 'Enter a valid phone number',
  },
})

การแสดงข้อผิดพลาด

const { register, handleSubmit, formState: { errors } } = useForm();

<input {...register('email', { required: 'Required' })} />
{errors.email && <p className="error">{errors.email.message}</p>}

การตรวจสอบแบบกำหนดเองด้วย validate

register('age', {
  validate: value =>
    parseInt(value) >= 18 || 'You must be at least 18',
})

ตัวตรวจสอบแบบกำหนดเองหลายรายการ

register('password', {
  validate: {
    hasUpper: v => /[A-Z]/.test(v) || 'Needs uppercase',
    hasDigit: v => /[0-9]/.test(v) || 'Needs a number',
  }
})

การแสดงจำนวนข้อผิดพลาด

const hasErrors = Object.keys(errors).length > 0;
<button type="submit" disabled={hasErrors}>Submit</button>

การกำหนดรูปแบบอินพุตที่มีข้อผิดพลาด

<input
  {...register('email', { required: true })}
  className={errors.email ? 'input-error' : ''}
/>

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน

บทเรียนถัดไป