Pengesahan Borang Segera Menggunakan JavaScript

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

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

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.

konsep asas

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

<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>

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

, 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;
}

tanpa bimbang tentang sempadan. box-shadow box-shadow

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

addEvent()

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);
    });
  }
}

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

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

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

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");
    }
  }
}

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

<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

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.

, 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

(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!