SvelteKiti vormid: progressiivse täiustamise meisterlik valdamine

Vormid on veebis kasutajate interaktsiooni selgroog. Alates lihtsatest kontaktivormidest kuni keerukate rakenduste töövoogudeni on need olulised teabe kogumiseks ja kasutajate tegevuste võimaldamiseks. SvelteKit, mis keskendub jõudlusele ja arendajakogemusele, pakub võimsaid tööriistu vastupidavate ja ligipääsetavate vormide loomiseks. See juhend uurib, kuidas kasutada progressiivset täiustamist, et luua vorme, mis töötavad kõigi jaoks, olenemata nende brauseri võimekusest või võrgutingimustest.

Mis on progressiivne täiustamine?

Progressiivne täiustamine on veebiarenduse strateegia, mis seab esikohale funktsionaalse ja ligipääsetava baaskogemuse loomise kõigile kasutajatele, lisades seejärel järk-järgult täiustatud funktsioone ja täiustusi kasutajatele, kellel on võimekamad brauserid või seadmed. See on vastupidavusele keskenduv lähenemine, mis tagab, et teie veebisait või rakendus jääb kasutatavaks isegi tehniliste piirangute korral.

Vormide kontekstis tähendab see:

• Põhifunktsionaalsus: Vorm peab olema kasutatav põhilise HTML-i ja CSS-iga, isegi ilma JavaScriptita.
• Ligipääsetavus: Vormielemendid peavad olema korrektselt sildistatud ja abistavatele tehnoloogiatele ligipääsetavad.
• Täiustatud kogemus: JavaScripti saab kasutada funktsioonide lisamiseks, nagu reaalajas valideerimine, dünaamilised vormiväljad ja täiustatud kasutajaliidese elemendid.

Miks see on oluline? Kaaluge järgmisi stsenaariume:

• Kasutajad, kellel on JavaScript keelatud: Mõned kasutajad keelavad JavaScripti turvalisuse või privaatsuse kaalutlustel teadlikult.
• Vanemate brauseritega kasutajad: Vanemad brauserid ei pruugi toetada uusimaid JavaScripti funktsioone.
• Aeglase või ebausaldusväärse internetiühendusega kasutajad: JavaScripti failide laadimine võib võtta kaua aega või need ei pruugi üldse laadida.
• Abistavaid tehnoloogiaid kasutavad kasutajad: Ekraanilugejad tuginevad kasutatava kogemuse pakkumiseks semantilisele HTML-ile.

Progressiivset täiustamist omaks võttes tagate, et teie vormid on kasutatavad võimalikult laiale publikule.

SvelteKit ja vormid: täiuslik sobivus

SvelteKiti arhitektuur muudab selle sobivaks progressiivselt täiustatud vormide loomiseks. See võimaldab teil määratleda vormitoiminguid, mida saab käsitleda nii serveris kui ka kliendis, andes teile paindlikkuse pakkuda sujuvat kogemust, olenemata sellest, kas JavaScript on lubatud.

Serveripoolne renderdamine (SSR)

SvelteKiti serveripoolse renderdamise võimekus on progressiivse täiustamise jaoks ülioluline. Kui kasutaja esitab vormi ilma JavaScriptita, saadetakse vormi andmed serverisse, kus neid saab töödelda ja valideerida. Seejärel saab server renderdada uue lehe vormi esitamise tulemustega, pakkudes põhilist, kuid funktsionaalset kogemust.

Kliendipoolne hüdreerimine

Kui JavaScript on lubatud, võtab SvelteKiti kliendipoolse hüdreerimise funktsioon juhtimise üle. Serveris renderdatud HTML "hüdreeritakse" JavaScriptiga, mis võimaldab teil lisada interaktiivseid funktsioone ja parandada kasutajakogemust. See hõlmab:

• Reaalajas valideerimine: Pakkuge kasutajatele kohest tagasisidet vormi täitmise ajal.
• Dünaamilised vormiväljad: Lisage või eemaldage vormivälju vastavalt kasutaja sisendile.
• Täiustatud kasutajaliidese elemendid: Kasutage JavaScripti vormielementide välimuse ja funktsionaalsuse parandamiseks.

Progressiivselt täiustatud vormi loomine SvelteKitis

Vaatame läbi näite lihtsa kontaktivormi loomisest SvelteKitis, demonstreerides progressiivse täiustamise põhimõtteid.

1. Põhiline HTML-vorm

Esmalt looge SvelteKiti marsruudis (nt `src/routes/contact/+page.svelte`) põhiline HTML-vorm:

            <form method="POST" action="?/submit">
  <label for="name">Nimi:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">E-post:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Sõnum:</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Saada sõnum</button>
</form>
            

              
                Copy
              
            
          

Põhipunktid:

• `method="POST"`: Määrab, et vormi andmed tuleks saata POST-meetodil.
• `action="?/submit"`: Määrab toimingu, mis tehakse vormi esitamisel. SvelteKitis on `?/submit` konventsioon vormitoimingu määratlemiseks samas marsruudis.
• `required` atribuut: Tagab, et väljad on enne esitamist kohustuslikud (seda haldab brauser, kui JavaScript on keelatud).
• Sildid (Labels): Iga sisend on ligipääsetavuse tagamiseks korrektselt sildistatud.

2. Serveripoolse vormitoimingu määratlemine

Järgmisena looge samasse kataloogi `+page.server.js` fail, et määratleda serveripoolne vormitoiming:

            import { fail } from '@sveltejs/kit';

/** @type {import('./$types').Actions} */
export const actions = {
  submit: async ({ request }) => {
    const data = await request.formData();
    const name = data.get('name');
    const email = data.get('email');
    const message = data.get('message');

    if (!name) {
      return fail(400, { name: { missing: true } });
    }

    if (!email) {
      return fail(400, { email: { missing: true } });
    }

    if (!message) {
      return fail(400, { message: { missing: true } });
    }

    // E-posti põhi valideerimine
    if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
      return fail(400, { email: { invalid: true } });
    }

    // Simuleerime e-kirja saatmist
    console.log('Nimi:', name);
    console.log('E-post:', email);
    console.log('Sõnum:', message);

    return { success: true };
  }
};

            

              
                Copy
              
            
          

Põhipunktid:

• `actions` objekt: See objekt sisaldab marsruudi vormitoiminguid.
• `submit` toiming: See funktsioon kutsutakse välja vormi esitamisel.
• `request.formData()`: Hangib vormi andmed päringust.
• Valideerimine: Kood valideerib vormi andmed serveris. Vigade ilmnemisel tagastab see `fail` vastuse veateadetega.
• `fail` funktsioon: Selle funktsiooni pakub `@sveltejs/kit` ja seda kasutatakse veavastuse tagastamiseks koos olekukoodi ja veaandmetega.
• Edukas vastus: Kui vormi andmed on kehtivad, simuleerib kood e-kirja saatmist ja tagastab `success` vastuse.

3. Valideerimisvigade kuvamine

Valideerimisvigade kuvamiseks Svelte'i komponendis saate kasutada `form` prop'i, mis edastatakse komponendile automaatselt, kui vormitoiming tagastab `fail` vastuse. Lisage järgmine kood faili `src/routes/contact/+page.svelte`:

            <script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

<form method="POST" action="?/submit">
  <label for="name">Nimi:</label>
  <input type="text" id="name" name="name" required>
  {#if data?.form?.name?.missing}
    <p class="error">Nimi on kohustuslik.</p>
  {/if}

  <label for="email">E-post:</label>
  <input type="email" id="email" name="email" required>
  {#if data?.form?.email?.missing}
    <p class="error">E-post on kohustuslik.</p>
  {/if}
  {#if data?.form?.email?.invalid}
    <p class="error">E-posti aadress on vigane.</p>
  {/if}

  <label for="message">Sõnum:</label>
  <textarea id="message" name="message" required></textarea>
  {#if data?.form?.message?.missing}
    <p class="error">Sõnum on kohustuslik.</p>
  {/if}

  <button type="submit">Saada sõnum</button>

  {#if data?.success}
    <p class="success">Sõnum on edukalt saadetud!</p>
  {/if}
</form>

<style>
  .error {
    color: red;
  }
  .success {
    color: green;
  }
</style>
            

              
                Copy
              
            
          

Põhipunktid:

• `export let data`: See deklareerib prop'i nimega `data`, mis võtab vastu serverist edastatud andmed.
• `data?.form`: See pääseb ohutult juurde `data` objekti `form` omadusele. `?` operaatorit kasutatakse valikuliseks aheldamiseks (optional chaining), et vältida vigu, kui `data` või `form` on määratlemata.
• Tingimuslik renderdamine: `{#if}` plokid renderdavad veateateid tingimuslikult serverist saadud andmete põhjal.
• Edukas sõnum: Edukas sõnum kuvatakse, kui `success` omadus on seatud väärtusele `true`.

Praeguseks on vorm funktsionaalne isegi ilma JavaScriptita. Kui keelate oma brauseris JavaScripti ja esitate vormi, peaksite nägema valideerimisvigu korrektselt kuvatuna.

4. Kliendipoolsete täiustuste lisamine

Nüüd lisame mõned kliendipoolsed täiustused kasutajakogemuse parandamiseks. Saame lisada reaalajas valideerimise ja takistada vormi esitamist vigade korral. See nõuab Svelte'i komponendis veidi JavaScripti.

            <script>
  /** @type {import('./$types').PageData} */
  export let data;

  let nameError = null;
  let emailError = null;
  let messageError = null;

  function validateForm() {
    nameError = null;
    emailError = null;
    messageError = null;

    let isValid = true;

    if (!$name) {
      nameError = 'Nimi on kohustuslik.';
      isValid = false;
    }

    if (!$email) {
      emailError = 'E-post on kohustuslik.';
      isValid = false;
    } else if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($email)) {
      emailError = 'E-posti aadress on vigane.';
      isValid = false;
    }

    if (!$message) {
      messageError = 'Sõnum on kohustuslik.';
      isValid = false;
    }

    return isValid;
  }

  /** @type {import('svelte/store').Writable<string>} */
  import { writable } from 'svelte/store';
  const name = writable('');
  const email = writable('');
  const message = writable('');

  async function handleSubmit(event) {
    if (!validateForm()) {
      event.preventDefault(); // Takistab vormi saatmist
      return;
    }

    // Kui vorm on kehtiv, lase SvelteKitil saatmist käsitleda
  }

  $: $name, $email, $message // Käivitab uuesti renderdamise, kui nimi, e-post või sõnum muutub

</script>

<form method="POST" action="?/submit" on:submit={handleSubmit}>
  <label for="name">Nimi:</label>
  <input type="text" id="name" name="name" bind:value={$name} required>
  {#if nameError || data?.form?.name?.missing}
    <p class="error">{nameError || 'Nimi on kohustuslik.'}</p>
  {/if}

  <label for="email">E-post:</label>
  <input type="email" id="email" name="email" bind:value={$email} required>
  {#if emailError || data?.form?.email?.missing || data?.form?.email?.invalid}
    <p class="error">{emailError || (data?.form?.email?.missing ? 'E-post on kohustuslik.' : 'E-posti aadress on vigane.')}</p>
  {/if}

  <label for="message">Sõnum:</label>
  <textarea id="message" name="message" bind:value={$message} required></textarea>
  {#if messageError || data?.form?.message?.missing}
    <p class="error">{messageError || 'Sõnum on kohustuslik.'}</p>
  {/if}

  <button type="submit">Saada sõnum</button>

  {#if data?.success}
    <p class="success">Sõnum on edukalt saadetud!</p>
  {/if}
</form>

<style>
  .error {
    color: red;
  }
  .success {
    color: green;
  }
</style>
            

              
                Copy
              
            
          

Põhipunktid:

• Svelte Stores: Kirjutatavate hoidlate (`name`, `email`, `message`) kasutamine vormi sisendväärtuste haldamiseks.
• `bind:value`: See direktiiv seob sisendväljade väärtuse vastavate Svelte'i hoidlatega. Iga muudatus sisendväljal uuendab automaatselt hoidla väärtust ja vastupidi.
• `on:submit={handleSubmit}`: See sündmusekäsitleja kutsutakse välja vormi esitamisel.
• `validateForm()`: See funktsioon teostab kliendipoolse valideerimise ja seab veateated.
• `event.preventDefault()`: See takistab vormi esitamist vigade korral.
• Veateadete kuvamine: Veateateid kuvatakse nii kliendi- kui ka serveripoolse valideerimise põhjal. See tagab, et kasutaja näeb vigu isegi siis, kui JavaScript on keelatud või ei lae.

5. JavaScripti vigade sujuv käsitlemine

Isegi kliendipoolse valideerimise puhul on oluline potentsiaalseid JavaScripti vigu sujuvalt käsitleda. Kui JavaScript ei lae või ei käivitu korrektselt, soovite siiski, et vorm oleks kasutatav. Vorm toimib juba ilma JavaScriptita tänu serveripoolsele toimingule. Kaaluge vealogimise lisamist oma kliendipoolsele koodile, et jälgida tootmises tekkida võivaid JavaScripti vigu. Tööriistad nagu Sentry või Bugsnag aitavad teil JavaScripti vigu reaalajas jälgida ja lahendada.

SvelteKiti vormide parimad praktikad progressiivse täiustamisega

• Alustage HTML-ist: Alustage alati funktsionaalse HTML-vormi ehitamisest, kasutades korrektset semantilist märgistust ja arvestades ligipääsetavusega.
• Serveripoolne valideerimine: Valideerige vormi andmeid alati serveris, isegi kui teete seda ka kliendi poolel. See on turvalisuse ja andmete terviklikkuse jaoks ülioluline.
• Kliendipoolne täiustamine: Kasutage JavaScripti kasutajakogemuse parandamiseks, kuid tagage, et vorm jääks kasutatavaks ka ilma selleta.
• Ligipääsetavus: Pöörake erilist tähelepanu ligipääsetavusele. Kasutage korrektseid silte, ARIA atribuute ja klaviatuurinavigatsiooni, et tagada teie vormide kasutatavus kõigile. Tööriistad nagu Axe DevTools aitavad tuvastada ligipääsetavuse probleeme.
• Vigade käsitlemine: Käsitsege JavaScripti vigu sujuvalt ja pakkuge kasutajale informatiivseid veateateid.
• Jõudlus: Optimeerige oma JavaScripti koodi, et tagada selle kiire laadimine ja käivitamine. Kasutage koodi tükeldamist (code splitting) ja laisklaadimist (lazy loading), et vähendada oma rakenduse esialgset laadimisaega.
• Testimine: Testige oma vorme põhjalikult nii sisse- kui ka väljalülitatud JavaScriptiga, et tagada nende ootuspärane toimimine kõigis stsenaariumides. Kasutage automatiseeritud testimisvahendeid regressioonide püüdmiseks.
• Rahvusvahelistamine (i18n): Kui teie rakendus on suunatud globaalsele publikule, kaaluge oma vormide rahvusvahelistamist. Kasutage tõlgete haldamiseks teeki nagu `svelte-i18n`. Pöörake tähelepanu erinevatele kuupäeva- ja numbrivormingutele erinevates lokaatides.
• Turvalisus: Olge teadlik levinud veebiturvalisuse haavatavustest, nagu saidiülene skriptimine (XSS) ja saidiülene päringu võltsimine (CSRF). Puhastage kasutaja sisendit ja kasutage oma rakenduse kaitsmiseks sobivaid turvapäiseid.
• Kasutajakogemus (UX): Kujundage oma vormid kasutajat silmas pidades. Tehke need kergesti mõistetavaks ja kasutatavaks. Pakkuge selgeid juhiseid ja kasulikku tagasisidet. Kaaluge progressiivse avalikustamise kasutamist, et näidata ainult seda teavet, mis on kasutajale antud hetkel asjakohane.

Täpsemad tehnikad

JavaScripti kasutamine vormi esitamise täiustamiseks

Vaikimisi vormi esitamise käitumise asemel saate kasutada JavaScripti, et vormi esitamine kinni püüda ja andmed serverisse saata `fetch` abil. See võimaldab teil pakkuda sujuvamat kasutajakogemust, näiteks kuvada laadimisindikaatorit vormi esitamise ajal ja uuendada lehte ilma täieliku lehe uuesti laadimiseta.

            async function handleSubmit(event) {
  event.preventDefault(); // Takistab vaikimisi vormi esitamist

  if (!validateForm()) {
    return;
  }

  try {
    const formData = new FormData(event.target);
    const response = await fetch(event.target.action, {
      method: 'POST',
      body: formData,
      headers: {
        'X-Requested-With': 'XMLHttpRequest' // Näitab, et tegemist on AJAX päringuga
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();

    if (data.success) {
      // Käsitle edu
      console.log('Vorm edukalt esitatud!');
    } else {
      // Käsitle vigu
      console.error('Vormi esitamine ebaõnnestus:', data);
    }
  } catch (error) {
    console.error('Vormi esitamisel tekkis viga:', error);
  }
}

            

              
                Copy
              
            
          

Põhipunktid:

• `event.preventDefault()`: Takistab vaikimisi vormi esitamise käitumist.
• `FormData`: Loob vormi andmetest `FormData` objekti.
• `fetch`: Saadab vormi andmed serverisse, kasutades `fetch` käsku.
• `X-Requested-With` päis: Seda päist kasutatakse näitamaks, et päring on AJAX-päring.
• Vigade käsitlemine: Kood käsitleb võimalikke vigu vormi esitamise protsessi ajal.

Dünaamilised vormiväljad

Saate kasutada JavaScripti, et lisada või eemaldada vormivälju dünaamiliselt vastavalt kasutaja sisendile. See võib olla kasulik vormide loomisel, mis kohanduvad kasutaja vajadustega.

Näide: dünaamilise arvu e-posti aadresside lisamine:

            <script>
  import { writable } from 'svelte/store';

  const emailAddresses = writable(['']);

  function addEmailAddress() {
    emailAddresses.update(emails => [...emails, '']);
  }

  function removeEmailAddress(index) {
    emailAddresses.update(emails => emails.filter((_, i) => i !== index));
  }
</script>

<div>
  {#each $emailAddresses as email, index}
    <div>
      <label for="email-{index}">E-post {index + 1}:</label>
      <input type="email" id="email-{index}" bind:value={$emailAddresses[index]}>
      <button type="button" on:click={() => removeEmailAddress(index)}>Eemalda</button>
    </div>
  {/each}

  <button type="button" on:click={addEmailAddress}>Lisa e-posti aadress</button>
</div>
            

              
                Copy
              
            
          

Põhipunktid:

• `emailAddresses` hoidla: See hoidla hoiab e-posti aadresside massiivi.
• `addEmailAddress()`: See funktsioon lisab massiivi uue e-posti aadressi.
• `removeEmailAddress()`: See funktsioon eemaldab massiivist e-posti aadressi.
• `{#each}` plokk: See plokk itereerib üle e-posti aadresside ja renderdab igaühe jaoks sisendvälja.
• `bind:value`: See direktiiv seob sisendvälja väärtuse vastava e-posti aadressiga massiivis. *Märkus: otse hoidlas olevate massiivi elementidega sidumine nõuab teatavat hoolikust. Kaaluge keerukamate dünaamiliste vormide jaoks robustsema olekuhalduslahenduse kasutamist.*

Integreerimine kolmandate osapoolte teenustega

Saate oma SvelteKiti vorme integreerida kolmandate osapoolte teenustega, nagu e-turunduse platvormid, CRM-süsteemid või makseväravad. Seda saab teha serveripoolsete vormitoimingute abil.

Näide: vormiandmete saatmine e-turunduse platvormile:

            // +page.server.js
import { fail } from '@sveltejs/kit';

/** @type {import('./$types').Actions} */
export const actions = {
  submit: async ({ request }) => {
    const data = await request.formData();
    const name = data.get('name');
    const email = data.get('email');

    // Valideerige vormi andmed

    try {
      // Saatke andmed e-turunduse platvormile
      const response = await fetch('https://api.example.com/subscribe', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY'
        },
        body: JSON.stringify({
          name,
          email
        })
      });

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }

      // Käsitle edu
      return { success: true };
    } catch (error) {
      // Käsitle vigu
      console.error('Viga e-posti nimekirja tellimisel:', error);
      return fail(500, { message: 'Tellimine ebaõnnestus. Palun proovige hiljem uuesti.' });
    }
  }
};

            

              
                Copy
              
            
          

Põhipunktid:

• `fetch`: Saadab vormiandmed e-turunduse platvormile `fetch`-i abil.
• API võti: Kood sisaldab API võtit e-turunduse platvormiga autentimiseks. *Tähtis: Ärge kunagi paljastage oma API võtmeid otse kliendipoolses koodis. Kasutage keskkonnamuutujaid või turvalist saladuste haldamise süsteemi.*
• Vigade käsitlemine: Kood käsitleb võimalikke vigu API päringu ajal.

Kokkuvõte

Ligipääsetavate ja vastupidavate vormide loomine on positiivse kasutajakogemuse loomiseks ülioluline. SvelteKit, mis keskendub jõudlusele ja arendajakogemusele, pakub teile vajalikke tööriistu vormide loomiseks, mis töötavad kõigi jaoks, olenemata nende brauseri võimekusest või võrgutingimustest. Progressiivset täiustamist omaks võttes saate tagada, et teie vormid on kasutatavad võimalikult laiale publikule ja et teie rakendus jääb tehniliste väljakutsete ees vastupidavaks. See juhend on andnud põhjaliku ülevaate sellest, kuidas luua SvelteKitis progressiivselt täiustatud vorme, hõlmates kõike alates põhilistest HTML-vormidest kuni täiustatud tehnikateni, nagu dünaamilised vormiväljad ja kolmandate osapoolte integratsioonid. Neid parimaid praktikaid järgides saate luua vorme, mis pole mitte ainult funktsionaalsed ja ligipääsetavad, vaid pakuvad ka sujuvat ja nauditavat kasutajakogemust.

Lisamaterjalid

• SvelteKiti dokumentatsioon
• MDN Web Docs: HTML vormid
• The A11y Project
• Web Accessibility Initiative (WAI)