When working with forms in React, ensuring that user input meets certain requirements is crucial. React Hook Form provides a set of built-in validation rules that make it easy to enforce common constraints directly in your form configuration. The most frequently used validation options include:

• required: ensures that an input field is not left empty;
• minLength: sets the minimum number of characters required for a text input;
• maxLength: sets the maximum number of characters allowed;
• pattern: checks that the input matches a specific regular expression pattern;
• min and max: set minimum and maximum values for number inputs.

You apply these rules by passing them as properties to the register function for each input. This allows React Hook Form to automatically check the user's input and provide feedback if a rule is not satisfied.

For example, you might want a username field to be required, have a minimum length of 4 characters, and allow only letters and numbers. You would set up your input like this:

<input
  {...register("username", {
    required: "Username is required",
    minLength: {
      value: 4,
      message: "Username must be at least 4 characters"
    },
    pattern: {
      value: /^[A-Za-z0-9]+$/,
      message: "Username can only contain letters and numbers"
    }
  })}
/>
{errors.username && <span>{errors.username.message}</span>}

In this example, the required rule ensures the field cannot be empty, minLength enforces a minimum character count, and pattern restricts the input to a certain format. If any of these rules are not met, the corresponding error message is displayed below the input field.

You can use similar rules for other types of inputs. For instance, to ensure an age field is required and between 18 and 99, you might write:

<input
  type="number"
  {...register("age", {
    required: "Age is required",
    min: {
      value: 18,
      message: "You must be at least 18"
    },
    max: {
      value: 99,
      message: "Age must be less than 100"
    }
  })}
/>
{errors.age && <span>{errors.age.message}</span>}

React Hook Form will automatically validate these rules whenever the user interacts with the form or tries to submit it, making it simple to provide immediate and clear feedback.