דוגמת קוד: וידוא קלט בשרת עם yup

25/12/2024

יומי

לפני כמה ימים הראיתי כאן איך לבדוק קלט בטופס צד לקוח עם yup. ראינו ש yup מגיע עם המון יכולות אבל החיבור שלו לממשק דורש עבודה וברוב המקרים אפשר לקבל תוצאה טובה יותר דרך הכלים המובנים ב HTML. מצד שני בעבודת צד שרת אנחנו מגלים כמה yup יעיל וגם המבנה האסינכרוני שלו נראה מאוד הגיוני, כי ממילא כל ה APIs ב node הם אסינכרוניים. שימו לב לקוד הבא לצד שרת עבור REST API עם Hono:

app.post('/signup', async (c) => {
  const body = await c.req.parseBody()
  try {
    await signupUserSchema.validate(body);
    // create the user and redirect
    return c.json({ ok: true });
  } catch (err) {
    throw new HTTPException(401, {message: String(err)})
  }
});

הקוד לוקח נתונים שהגיעו מבקשת POST לטופס ומוודא שהם תקינים תוך שימוש בסכימה של yup. המבנה הזה טוב כי הוא מפריד בין "מה שצריך לעשות" ל"איך צריך לעשות את זה", כלומר ברור כשמסתכלים על הקוד שיש פה וולידציה, ברור מה קורה אם הוולידציה מצליחה או אם היא נכשלת, אבל הוולידציה עצמה מבוססת על סכימה שמוגדרת במקום אחר. אם בעתיד נרצה לשנות שדות בטופס או את חוקי הוולידציה שלהם לא נצטרך לגעת בקוד של ה Endpoint.

ורק בשביל להשלים את התמונה זה קוד הסכימה מתוך הקובץ signupUserSchema:

import {object, string} from 'yup';

export default object().shape({
  email: string().required().email(),
  password: string().required().min(3),
});

וקוד הטופס:

<!DOCTYPE html>
<html>
  <body>
    <h1>Sign Up</h1>
    <form action="/signup" method="post">
      <label>
        Email
        <input type="email" name="email" required />
      </label>

      <label>
        Password
        <input type="password" name="password" required minlength="3" />
      </label>

      <input type="submit" />
    </form>
  </body>
</html>

דוגמת קוד: וידוא קלט בשרת עם yup

עדכונים יומיים