Mengesahkan borang menggunakan Parsley.js-tutorial js-php.cn

Mengesahkan borang menggunakan Parsley.js

WBOY

Lepaskan： 2023-08-31 08:21:06

ke hadapan

1398 orang telah melayarinya

使用 Parsley.js 验证表单

Dalam tutorial ini, kami akan menunjukkan kepada anda cara menggunakan Parsley.js, perpustakaan JavaScript yang digunakan terutamanya untuk mengesahkan borang. Parsley membantu untuk mengesahkan borang dengan cara yang sangat halus dan mudah dan ia adalah salah satu perpustakaan pengesahan borang yang digunakan secara meluas.

Parsley.js features

Terdapat banyak sebab mengapa Parsley ialah pilihan yang baik untuk mengesahkan borang JavaScript. Sebahagian daripada mereka disebut di bawah.

Intuitif DOM API - API DOM membolehkan anda menggunakan bahasa Inggeris biasa dalam penanda HTML dan Parsley akan melakukan yang lain. Walaupun untuk pengesahan bentuk mudah, anda tidak perlu menulis satu baris JavaScript.
Pengesahan Borang Dinamik - Parsley boleh mengesan pengubahsuaian borang dengan mudah dan menyesuaikan pengesahannya dengan sewajarnya.
Banyak pengesah - Terdapat satu tan pengesah terbina dalam dalam Parsley. Kami juga boleh menggunakan pengesah Ajax jika perlu.
SANGAT DIPERCAYAI - Ia bebas pepijat dan telah diuji dengan teliti juga.
UX-CENTRIC - Parsley pakar dalam UI dan UX, malah kami boleh mengatasi hampir semua gelagat lalai Parsley untuk memenuhi keperluan anda yang tepat.

Cara menggunakan borang pengesahan Parsley

Sekarang kita tahu serba sedikit tentang Parsley.js, sudah tiba masanya kita menumpukan pada contoh menggunakan Parsley. Pertimbangkan fail "index.html" berikut, di mana kami mempunyai borang dengan kod JavaScript ringkas yang dibenamkan di dalamnya.

Contoh

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Parsely.js Example</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
   crossorigin="anonymous"></script>
   <script
   src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/dist/parsley.js"></script>
</head>
<body>
   <h2>Fill in the form and click the validate button at the bottom</h2>
   <form id="demo-form" data-parsley-validate="">
   <label for="fullname">Enter Your Full Name * :</label>
   <input type="text" class="form-control" name="fullname" required="">
   <br /><br />
   <label for="email">Enter Your Email * :</label>
   <input type="email" class="form-control" name="email" data-parsleytrigger="change" required="">
   <br /><br />
   <label for="contactMethod">Please Enter Your Preferred Contact Method*:</label> Email: <input type="radio" name="contactMethod"id="contactMethodEmail" value="Email" required=""> Phone: <input type="radio" name="contactMethod" id="contactMethodPhone" value="Phone">
   <br /><br />
   <label for="hobbies">Enter Your Hobbies (Optional, but 2 minimum):</label>
   <p>
      Coding <input type="checkbox" name="hobbies[]" id="hobby1"value="ski" data-parsley-mincheck="2"><br> Walking <input type="checkbox"name="hobbies[]" id="hobby2" value="run"><br> Eating <input type="checkbox" name="hobbies[]" id="hobby3" value="eat"><br> Sleeping <input type="checkbox" name="hobbies[]" id="hobby4" value="sleep"><br> Traveling <input type="checkbox" name="hobbies[]" id="hobby5" value="read"><br> Writing <input type="checkbox" name="hobbies[]" id="hobby6" value="code"><br></p>
   <p>
      <label for="heard">Heard about us via *:</label>
      <select id="heard" required="">
         <option value="">Choose..</option>
         <option value="press">Press</option>
         <option value="net">Internet</option>
         <option value="mouth">Word of mouth</option>
         <option value="other">Other..</option>
      </select>
   </p>
   <p>
      <label for="message">Message (20 chars min, 100 max) :</label>
      <textarea id="message" class="form-control" name="message" dataparsley- trigger="keyup" data-parsley-minlength="20" data-parsleymaxlength=" 100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.." data-parsley-validationthreshold="10"></textarea>
   </p>
   <br>
   <input type="submit" class="btn btn-default" value="validate">
   </form>
   <script>
      $(function() {
         $('#demo-form').parsley().on('field:validated', function() {
            var ok = $('.parsley-error').length === 0;
            $('.bs-callout-info').toggleClass('hidden', !ok);
            $('.bs-callout-warning').toggleClass('hidden', ok);
         })
         .on('form:submit', function() {
            return false;
         });
      });
   </script>
</body>
</html>

Salin selepas log masuk

Klik butang "Edit dan Jalankan" di bahagian atas untuk menjalankan kod ini dan melihat borang output.

Penerangan

Dalam kod ini, kami mempunyai borang dengan berbilang kawasan teks yang memerlukan nilai yang berbeza. Dalam setiap nilai kami mempunyai kata kunci teks, kotak pilihan atau pilihan.

Selain itu, terdapat butang "Sahkan" di hujung kod. Anda akan mendapat ralat pop timbul daripada Parsley apabila anda mengklik butang tanpa mengisi sebarang borang dan anda akan mendapat ralat pengesahan daripada Parsley.js apabila beberapa medan yang anda masukkan tidak sepadan dengan jangkaan mereka .

Anda boleh menjalankan kod ini di sini dan mengisi medan yang berbeza berdasarkan tujuan ujian pilihan anda.

KESIMPULAN

Dalam tutorial ini, kami menggunakan contoh mudah untuk menunjukkan cara mengesahkan borang dalam JavaScript menggunakan Parsley.js.

Atas ialah kandungan terperinci Mengesahkan borang menggunakan Parsley.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!