js/validation.js — grynos taisyklės

Kodo stulpelyje — js/validation.js: taisyklės kaip grynos funkcijos. Kiekviena priima reikšmę ir grąžina klaidos tekstą arba null.

Atkreipk dėmesį į modelį — taisyklė yra funkcija, grąžinanti funkciją:

export const minLength = (n, label = 'This field') => (value) =>
  value && value.length < n ? `${label} must be at least ${n} characters.` : null;

minLength(3, 'Username') grąžina taisyklę, paruoštą reikšmei. Todėl jas galima komponuoti į masyvą, o validateFields pereina visas ir grąžina pirmą klaidą kiekvienam laukui:

validateFields(
  { email: 'nope', name: '' },
  { email: [required('Email'), email()], name: [required('Name')] }
);
// → { email: 'Please enter a valid email address.', name: 'Name is required.' }

Dvi smulkmenos, kurios daug pasako:

email() ir url() praleidžia tuščią reikšmę (if (!value) return null) — jie tikrina formatą, o privalomumą prideda required atskirai. Todėl „neprivalomas el. paštas, bet jei įrašytas — teisingas" yra tiesiog [email()], o privalomas — [required('Email'), email()].
url() naudoja new URL(value), ne regex. Naršyklė moka analizuoti URL geriau nei bet koks tavo šablonas; try/catch pagauna netaisyklingus.

Šios funkcijos — visiškai atsietos nuo DOM. Jas gali testuoti be naršyklės (validateFields(...) grąžina objektą). Būtent todėl validacijos „smegenys" laikomos atskirai nuo formos „kūno" (kitas žingsnis).

Patarimas. validateFields palieka tik pirmą klaidą kiekvienam laukui (break). Vartotojui geriau matyti „El. paštas privalomas", ištaisyti, tada „El. paštas neteisingas" — po vieną, nei visą sąrašą iš karto.

validation.js SUKURTI

Sukurk šį failą kataloge js/

// Validation rules — pure functions, no DOM, no state. This is the part you
// can unit-test without a browser. Rules COMPOSE: a field gets an array of them.
//
// Each rule takes a value and returns an error string, or null if valid.

export const required = (label = 'This field') => (value) =>
  !value || String(value).trim() === '' ? `${label} is required.` : null;

export const minLength = (n, label = 'This field') => (value) =>
  value && value.length < n ? `${label} must be at least ${n} characters.` : null;

export const maxLength = (n, label = 'This field') => (value) =>
  value && value.length > n ? `${label} must be ${n} characters or fewer.` : null;

export const email = () => (value) => {
  if (!value) return null;                 // optional: empty is fine (add required to force it)
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;   // good enough for a UI
  return pattern.test(value) ? null : 'Please enter a valid email address.';
};

export const url = () => (value) => {
  if (!value) return null;
  try {
    const parsed = new URL(value);
    return ['http:', 'https:'].includes(parsed.protocol)
      ? null : 'URL must start with http:// or https://';
  } catch {
    return 'Please enter a valid URL.';
  }
};

/**
 * Run a set of rules over a set of values.
 *   validateFields({ email: 'nope' }, { email: [required('Email'), email()] })
 *   // → { email: 'Please enter a valid email address.' }
 */
export function validateFields(values, rules) {
  const errors = {};
  for (const [field, fieldRules] of Object.entries(rules)) {
    for (const rule of fieldRules) {
      const error = rule(values[field]);
      if (error) { errors[field] = error; break; }    // keep only the FIRST error per field
    }
  }
  return errors;
}

export function hasErrors(errors) {
  return Object.keys(errors).length > 0;
}