Yup that only allows a single domain address in vue 3?

Question

I have an add user form and need allows only one domain address in Yup,for example ([email protected]) in here have to only allows "@abc.com". Not allows @outlook.com ,not allows @gmail.com etc. Any helps? Thank you in advance.

  const addUser = Yup.object().shape({
      email: Yup.string()
        .email(i18n.t("form.message.email"))
        .required(i18n.t("form.message.required")),
      first_name: Yup.string().required(i18n.t("form.message.required")),
      last_name: Yup.string().required(i18n.t("form.message.required")),
    });

Here is html code

   <div class="mb-4 col-sm-12">
            <label class="form-label fw-bold"
              >{{ $t("form.label.email") }}:</label
            >
            <Field
              class="form-control"
              type="email"
              v-model="email"
              name="email"
              autocomplete="off"
              :placeholder="$t('form.label.email')"
            />
            <div class="fv-plugins-message-container">
              <div class="fv-help-block">
                <ErrorMessage name="email" />
              </div>
            </div>
          </div>

Answer 1

You should use regex to validate email domain

const addUser = Yup.object().shape({
      email: Yup.string()
        .email(i18n.t("form.message.email")) 
        .required(i18n.t("form.message.required"))
         .matches(/\@abc.com$/, 'Domain not allowed) // <--- Add this,
      first_name: Yup.string().required(i18n.t("form.message.required")),
      last_name: Yup.string().required(i18n.t("form.message.required")),
});