Pengesahan Borang Masa Nyata: Penambahbaikan Senyap untuk Meningkatkan Pengalaman Pengguna

mata teras:

JavaScript boleh digunakan untuk melaksanakan pengesahan bentuk masa nyata, yang memberikan pengguna maklum balas segera mengenai kesahan input, dengan itu meningkatkan pengalaman pengguna dan mengekalkan integriti data, memastikan bahawa hanya data yang sah diserahkan.
atribut HTML5
• dan pattern boleh digunakan untuk menentukan julat input yang sah dari elemen bentuk. Jika penyemak imbas tidak menyokong sifat -sifat ini, nilai -nilainya boleh digunakan sebagai asas bagi populator keserasian JavaScript. required Atribut
• boleh digunakan untuk menunjukkan sama ada medan tidak sah. Harta ini menyediakan maklumat aksesibiliti dan boleh digunakan sebagai cangkuk CSS untuk menunjukkan secara visual medan tidak sah. aria-invalid
Fungsi JavaScript
• Uji medan dan lakukan pengesahan sebenar, mengawal atribut instantValidation() untuk menunjukkan status medan. Fungsi ini boleh terikat pada acara aria-invalid untuk memberikan pengesahan bentuk masa nyata. onchange

HTML5 memperkenalkan beberapa sifat baru untuk melaksanakan pengesahan borang berasaskan pelayar. Hartanah

adalah ungkapan biasa yang mentakrifkan julat input yang sah untuk elemen kawasan teks dan kebanyakan jenis input. Atribut pattern Menentukan sama ada medan diperlukan. Bagi pelayar yang lebih tua yang tidak menyokong sifat -sifat ini, kita boleh menggunakan nilai mereka sebagai asas untuk pengisi keserasian. Kami juga boleh menggunakannya untuk memberikan peningkatan yang lebih menarik-pengesahan bentuk masa nyata. required

Harus diperhatikan bahawa anda tidak terlalu banyak penggunaan pengesahan, supaya tidak mengganggu tingkah laku pelayaran biasa dan menghalang operasi pengguna. Sebagai contoh, saya telah melihat beberapa bentuk yang tidak boleh meninggalkan medan tidak sah menggunakan tab

Kunci - JavaScript digunakan (lebih tepat, disalahgunakan) untuk memaksa fokus untuk kekal dalam bidang sehingga ia sah. Ini sangat tidak menguntungkan pengalaman pengguna dan secara langsung melanggar garis panduan aksesibiliti.

Artikel ini akan memperkenalkan kaedah pelaksanaan yang kurang invasif. Ia bukan pengesahan pelanggan penuh - ia hanya peningkatan pengalaman pengguna yang sedikit dilaksanakan dengan cara yang boleh diakses, dan apabila saya menguji skrip ia mendapati ia hampir sama dengan pelaksanaan asli Firefox semasa!

konsep asas

Dalam versi terkini Firefox, jika medan yang diperlukan kosong atau nilainya tidak sepadan dengan corak, medan akan memaparkan sempadan merah seperti yang ditunjukkan dalam angka berikut:

Sudah tentu, ini tidak akan berlaku dengan segera. Jika ini berlaku, sempadan akan dipaparkan secara lalai untuk setiap medan yang diperlukan. Sebaliknya, sempadan ini dipaparkan hanya selepas anda berinteraksi dengan medan, yang pada dasarnya (walaupun tidak betul -betul) sama dengan acara

.

Oleh itu, kita akan menggunakan

sebagai peristiwa pencetus. Sebagai alternatif, kita boleh menggunakan acara onchange, yang akan membakar selagi kita menaip atau menampal sebarang nilai dalam bidang. Tetapi ini benar -benar "segera" kerana ia boleh dengan mudah mencetuskan berulang kali semasa menaip secara berturut -turut, mengakibatkan kesan berkedip, yang boleh bosan atau terganggu oleh sesetengah pengguna. Dan, bagaimanapun, oninput tidak mencetuskan dari input pengaturcaraan, dan oninput akan mencetuskan, kita mungkin memerlukannya untuk mengendalikan operasi seperti autocomplete dari plugin pihak ketiga. onchange

Tentukan html dan css

mari kita lihat pelaksanaan kami, bermula dengan HTML ia berdasarkan:

<form action="#" method="post">
  <fieldset>
    <legend><strong>Add your comment</strong></legend>

    <p>
      <label for="author">Name <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="author"
        name="author"
        pattern="^([- \w\d\u00c0-\u024f]+)$"
        required="required"
        size="20"
        spellcheck="false"
        title="Your name (no special characters, diacritics are okay)"
        type="text"
        value=""
      >
    </p>

    <p>
      <label for="email">Email <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="email"
        name="email"
        pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
        required="required"
        size="30"
        spellcheck="false"
        title="Your email address"
        type="email"
        value=""
      >
    </p>

    <p>
      <label for="website">Website</label>
      <input
        id="website"
        name="website"
        pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
        size="30"
        spellcheck="false"
        title="Your website address"
        type="url"
        value=""
      >
    </p>

    <p>
      <label for="text">Comment <abbr title="Required">*</abbr></label>
      <textarea
        aria-required="true"
        cols="40"
        id="text"
        name="text"
        required="required"
        rows="10"
        spellcheck="true"
        title="Your comment"
      ></textarea>
    </p>

  </fieldset>
  <fieldset>
    <input name="preview" type="submit" value="Preview">
    <input name="save" type="submit" value="Submit Comment">
  </fieldset>
</form>

Contoh ini adalah bentuk komen mudah di mana beberapa bidang diperlukan, beberapa bidang disahkan, dan beberapa bidang memenuhi kedua -dua keadaan. Bidang dengan atribut

juga mempunyai atribut required untuk menyediakan semantik sandaran untuk teknologi bantuan yang tidak menyokong jenis input baru. aria-required Spesifikasi ARIA

juga mentakrifkan atribut

, yang akan kami gunakan untuk menunjukkan jika medan tidak sah (tidak ada atribut bersamaan dalam HTML5). Hartanah aria-invalid jelas menyediakan maklumat kebolehaksesan, tetapi ia juga boleh digunakan sebagai cangkuk CSS untuk memohon sempadan merah: aria-invalid

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}

kita hanya boleh menggunakan

tanpa bimbang tentang sempadan. box-shadow box-shadow

Tambah JavaScript

Sekarang kita mempunyai kod statik, kita boleh menambah skrip. Pertama, kita memerlukan fungsi asas

:

addEvent()

Seterusnya, kita memerlukan fungsi untuk menentukan sama ada bidang yang diberikan harus disahkan, yang hanya menguji bahawa ia tidak dilumpuhkan atau hanya dibaca, dan ia mempunyai atribut

function addEvent(node, type, callback) {
  if (node.addEventListener) {
    node.addEventListener(type, function(e) {
      callback(e, e.target);
    }, false);
  } else if (node.attachEvent) {
    node.attachEvent('on' + type, function(e) {
      callback(e, e.srcElement);
    });
  }
}

atau

: pattern required Dua syarat pertama mungkin kelihatan verbose, tetapi ia perlu kerana sifat

dan

function shouldBeValidated(field) {
  return (
    !(field.getAttribute("readonly") || field.readonly) &&
    !(field.getAttribute("disabled") || field.disabled) &&
    (field.getAttribute("pattern") || field.getAttribute("required"))
  );
}

unsur tidak semestinya mencerminkan keadaan atribut mereka. Sebagai contoh, dalam opera, bidang dengan atribut keras

masih kembali disabled untuk atribut readonly mereka (atribut titik hanya sepadan dengan keadaan yang ditetapkan melalui skrip). readonly="readonly" readonly Sebaik sahaja kita mempunyai utiliti ini, kita dapat menentukan fungsi pengesahan utama, yang menguji medan, dan kemudian melakukan pengesahan sebenar seperti yang diperlukan: undefined

Oleh itu, jika medan diperlukan tetapi tidak mempunyai nilai, atau ia mempunyai corak dan nilai, tetapi nilai tidak sepadan dengan corak, medan tidak sah.

Oleh kerana corak sudah mentakrifkan bentuk rentetan ekspresi biasa, kita hanya perlu lulus rentetan ke pembina

function instantValidation(field) {
  if (shouldBeValidated(field)) {
    var invalid =
      (field.getAttribute("required") && !field.value) ||
      (field.getAttribute("pattern") &&
        field.value &&
        !new RegExp(field.getAttribute("pattern")).test(field.value));
    if (!invalid && field.getAttribute("aria-invalid")) {
      field.removeAttribute("aria-invalid");
    } else if (invalid && !field.getAttribute("aria-invalid")) {
      field.setAttribute("aria-invalid", "true");
    }
  }
}

, dan ia mewujudkan objek ekspresi biasa yang dapat kita uji untuk nilai itu. Walau bagaimanapun, kita perlu pretest nilai untuk memastikan ia tidak kosong supaya regex itu sendiri tidak perlu mempertimbangkan rentetan kosong.

Sebaik sahaja kita telah menentukan sama ada medan itu tidak sah, kita dapat mengawal harta aria-invalid untuk menunjukkan status - menambahkannya ke medan yang tidak sah yang belum mempunyai harta, atau dari medan yang sah yang telah dipadamkan dalam. Sangat sederhana! Akhirnya, agar ini berfungsi, kita perlu mengikat fungsi pengesahan ke acara onchange. Semestinya mudah seperti ini: Walau bagaimanapun, agar ini berfungsi, acara

mesti gelembung (menggunakan teknologi yang biasa dikenali sebagai perwakilan acara), tetapi di Internet Explorer 8 dan lebih awal, Acara

<form action="#" method="post">
  <fieldset>
    <legend><strong>Add your comment</strong></legend>

    <p>
      <label for="author">Name <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="author"
        name="author"
        pattern="^([- \w\d\u00c0-\u024f]+)$"
        required="required"
        size="20"
        spellcheck="false"
        title="Your name (no special characters, diacritics are okay)"
        type="text"
        value=""
      >
    </p>

    <p>
      <label for="email">Email <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="email"
        name="email"
        pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
        required="required"
        size="30"
        spellcheck="false"
        title="Your email address"
        type="email"
        value=""
      >
    </p>

    <p>
      <label for="website">Website</label>
      <input
        id="website"
        name="website"
        pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
        size="30"
        spellcheck="false"
        title="Your website address"
        type="url"
        value=""
      >
    </p>

    <p>
      <label for="text">Comment <abbr title="Required">*</abbr></label>
      <textarea
        aria-required="true"
        cols="40"
        id="text"
        name="text"
        required="required"
        rows="10"
        spellcheck="true"
        title="Your comment"
      ></textarea>
    </p>

  </fieldset>
  <fieldset>
    <input name="preview" type="submit" value="Preview">
    <input name="save" type="submit" value="Submit Comment">
  </fieldset>
</form>

tidak berlaku Bubble onchange. Kita boleh memilih untuk mengabaikan penyemak imbas ini, tetapi saya fikir ia akan menjadi malu, terutamanya jika masalahnya begitu mudah untuk diselesaikan. Ia hanya bermaksud bahawa kod itu sedikit lebih kompleks - kita perlu mendapatkan koleksi unsur -unsur input dan kawasan teks, melangkah melalui mereka dan mengikat acara onchange ke setiap bidang secara berasingan: onchange

Kesimpulan dan prospek

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}

Itu-peningkatan pengesahan bentuk masa nyata yang mudah dan tidak invasif yang memberikan petua yang boleh diakses dan intuitif untuk membantu pengguna menyelesaikan borang.

Selepas skrip ini dilaksanakan, kami sebenarnya dapat menyelesaikan program pengisi keserasian lengkap dalam beberapa langkah sahaja. Skrip sedemikian adalah di luar skop artikel ini, tetapi jika anda ingin membangunkannya lebih jauh, semua modul asas di sini menguji sama ada bidang itu harus disahkan, bidang harus disahkan mengikut skema dan/atau

, dan peristiwa pencetus yang mengikat.

Saya mesti mengakui, saya tidak pasti sama ada ia benar -benar berbaloi! Jika anda sudah mempunyai peningkatan ini (yang berfungsi dalam IE7 dan semua pelayar moden), dan pertimbangkan bahawa anda tidak mempunyai pilihan tetapi untuk melaksanakan pengesahan sisi pelayan, dan pertimbangkan bahawa anda mempunyai sokongan untuk penyemak imbas required dan

Menggunakannya untuk pengesahan pra -penyataan - dengan semua ini dalam fikiran, adakah ia benar -benar perlu untuk menambah pengisi keserasian lain?

(bahagian Soalan Lazim mengenai pengesahan masa nyata boleh ditambah di sini, kandungannya sama dengan bahagian FAQ dalam dokumen asal) pattern required

Atas ialah kandungan terperinci Pengesahan Borang Segera Menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!