Pengesahan bentuk ringan dengan alpine.js dan iodine.js

Pengguna moden mengharapkan maklum balas segera semasa pengesahan borang. Artikel ini menunjukkan bagaimana alpine.js dan iodine.js, dua perpustakaan JavaScript ringan, membuat bentuk yang sangat interaktif dengan overhead yang minimum, sesuai untuk tapak statik kecil atau aplikasi yang diberikan pelayan (seperti Rails atau Laravel). Perpustakaan ini mengelakkan kerumitan alat membina JavaScript berat.

Kami akan membina borang dengan pengesahan yang dipertingkatkan secara progresif, mempamerkan API alpine.js dan iodine.js. Borang akhir memberikan maklum balas segera mengenai input tidak sah.

Memperkenalkan alpine.js dan iodine.js

Alpine.js adalah perpustakaan yang dihoskan CDN, yang tidak memerlukan langkah membina atau kebergantungan. Dokumentasi ringkas dan saiz kecil (8.36 kb minified dan gzipped) menjadikannya sangat cekap. Ia digambarkan sebagai penggantian JQuery/Vanilla JavaScript dengan templat seperti Vue, bukan pesaing untuk rangka kerja yang lebih besar.

Iodine.js adalah perpustakaan pengesahan bentuk mikro yang direka untuk integrasi mudah dengan mana -mana rangka kerja frontend. Ia memudahkan pengesahan dengan membenarkan pelbagai peraturan setiap medan input dan memberikan mesej ralat yang jelas.

Iodine.js dalam tindakan: Contoh asas

Berikut adalah contoh pengesahan klien asas menggunakan iodine.js, diambil melalui CDN:

 // ... (pautan cdn iodine.js akan pergi ke sini) ...

Atau, menggunakan Skypack:

 import kingshottiodine dari "https://cdn.skypack.dev/@kingshott/iodine";

Ingatlah untuk menggunakan kingshottIodine semasa mengimport dari Skypack. Iodine is kaedah pemeriksaan kesahihan input terhadap peraturan yang ditentukan. Ia kembali true untuk input yang sah atau rentetan ralat sebaliknya.

Kami akan menggunakan atribut data HTML untuk menyimpan peraturan pengesahan untuk setiap input:

<input type="text" name="username" data-rules='["required", "minLength:5"]'>

Vanilla Javascript Mengendalikan Pengesahan:

 biarkan form = document.getElementById ("Form");
biarkan input = [... form.QuerySelectorAll ("input [data-peraturan]")];

fungsi onSubmit (event) {
  inputs.map ((input) => {
    jika (iodine.is (input.value, json.parse (input.dataset.rules))! == true) {
      event.PreventDefault ();
      input.classlist.add ("tidak sah");
    }
  });
}
form.AddEventListener ("Hantar", onsubmit);

Contoh asas ini tidak mempunyai keramahan pengguna. Ia tidak memberikan mesej ralat dan tidak mengemas kini secara dinamik.

Meningkatkan dengan alpine.js

Alpine.js meningkatkan pengalaman pengguna. Kami akan mengesahkan perubahan kabur atau input, memberikan maklum balas segera tanpa mengganggu input. Alpine.js dimasukkan melalui CDN:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v3.x.x/dist/alpine.min.js" defer></script>

Atau, melalui Skypack:

 import alpinejs dari "https://cdn.skypack.dev/alpinejs";

Kami akan menguruskan keadaan input (status status dan mesej ralat) dalam komponen Alpine.js menggunakan x-data . Fungsi mentakrifkan data komponen:

 Alpine.data ("bentuk", bentuk);
Alpine.start ();

bentuk fungsi () {
  kembali {
    Nama pengguna: {errormessage: '', kabur: palsu},
    E -mel: {ErrorMessage: '', kabur: palsu},
    Kata Laluan: {ErrorMessage: '', kabur: palsu},
    kata laluan: {errormessage: '', kabur: palsu},
    // ... (fungsi akan ditambah kemudian) ...
  };
}

x-bind:class Menambah Kelas "Tidak Sah":

<input type="text" name="username" x-bind:class="{ 'invalid': username.errorMessage && username.blurred }" ...>

Bertindak balas terhadap perubahan input

Pendengar acara mengemas kini keadaan komponen:

 // ... dalam fungsi 'bentuk' ...
Blur: fungsi (acara) {
  biarkan ele = event.target;
  Ini [ele.name] .blurred = true;
  biarkan peraturan = json.parse (ele.dataset.rules);
  Ini [ele.name] .errormessage = this.geterrormessage (ele.value, peraturan);
},
input: fungsi (peristiwa) {
  biarkan ele = event.target;
  biarkan peraturan = json.parse (ele.dataset.rules);
  Ini [ele.name] .errormessage = this.geterrormessage (ele.value, peraturan);
},
geterrormessage: fungsi (nilai, peraturan) {
  biarkan isvalid = iodine.is (nilai, peraturan);
  jika (isvalid! == true) {
    kembali iodine.geterrormessage (isvalid);
  }
  kembali '';
},
// ...

Mesej ralat dipaparkan menggunakan x-show dan x-text :

<p x-show="username.errorMessage && username.blurred" x-text="username.errorMessage"></p>

Pengendali acara @submit (dalam komponen Alpine) mengendalikan penyerahan borang:

 hantar: fungsi (acara) {
  biarkan input = [... ini. $ el.QuerySelectorAll ("input [data-peraturan]")];
  inputs.map ((input) => {
    jika (iodine.is (input.value, json.parse (input.dataset.rules))! == true) {
      event.PreventDefault ();
    }
  });
}

Pengendalian ralat pelayan

Untuk mengendalikan kesilapan pelayan, kami akan menyimpannya dalam atribut data-server-errors dan menggunakan x-init untuk mengisi keadaan komponen:

<input type="text" name="username" data-server-errors='["Username already exists"]' ...>

Fungsi init dalam komponen alpine akan mengendalikan ini:

 init: fungsi () {
  this.InputeLements = [... this. $ el.QuerySelectorAll ("input [data-rules]")]];
  this.InitdomData ();
},
initdomdata: fungsi () {
  this.InputeLements.Map ((ele) => {
    Ini [ele.name] = {
      ServerErrors: json.parse (ele.dataset.serverErrors),
      kabur: palsu
    };
  });
}

Fungsi getErrorMessage dikemas kini untuk mengutamakan kesilapan pelayan:

 geterrormessage: fungsi (ele) {
  jika (ini [ele.name] .serverErrors.length> 0) {
    kembali ini [ele.name] .serverErrors [0];
  }
  // ... (selebihnya fungsi tetap sama) ...
}

Mengendalikan input saling bergantung

Untuk input saling bergantung (contohnya, pengesahan kata laluan), kami akan mengemas kini semua mesej ralat pada setiap perubahan input. Kaedah addRule iodine mewujudkan peraturan tersuai:

 Iodine.addrule (
  "MatchingPassword",
  nilai => nilai === document.getElementById ("Kata Laluan"). Nilai
);
Iodine.messages.matchingpassword = "pengesahan kata laluan perlu dipadankan dengan kata laluan";

Fungsi updateErrorMessages mengendalikan ini:

 UpdateRrormessages: Function () {
  this.InputeLements.Map ((ele) => {
    Ini [ele.name] .errormessage = this.geterrormessage (ele);
  });
},

Fungsi getErrorMessage ditapis untuk hanya mengembalikan mesej jika input kabur:

 geterrormessage: fungsi (ele) {
  // ... (pemeriksaan ralat pelayan) ...
  const error = iodine.is (ele.value, json.parse (ele.dataset.rules));
  jika (error! == true && this [ele.name] .blurred) {
    kembali iodine.geterrormessage (ralat);
  }
  kembali "";
}

Pendengar acara dipindahkan ke elemen bentuk induk, menggunakan focusout dan bukannya blur :

…

Akhirnya, peralihan pudar ditambah untuk maklum balas visual:

<p x-show="username.errorMessage" x-text="username.errorMessage" x-transition:enter=""></p>

Ini menghasilkan penyelesaian pengesahan bentuk reaktif, boleh diguna semula, dan cekap. Fungsi form yang disediakan boleh digunakan semula dalam pelbagai bentuk dengan mengkonfigurasi atribut HTML dengan sewajarnya.

Atas ialah kandungan terperinci Pengesahan bentuk ringan dengan alpine.js dan iodine.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!