Borang HTML5: JavaScript dan API Pengesahan Kekangan

mata teras

HTML5 membolehkan pengesahan borang pelanggan bebas daripada pengekodan JavaScript, tetapi untuk bentuk yang lebih kompleks, JavaScript dan API pengesahan kekangan boleh digunakan untuk meningkatkan pengesahan asli. Ini kerana beberapa batasan, seperti tidak semua pelayar menyokong semua jenis input HTML5 dan pemilih CSS, dan sukar untuk gaya gelembung mesej ralat.
• API pengesahan kekangan
menyediakan beberapa kaedah dan sifat seperti
• , .willValidate, .checkValidity(), dan .validity. Ini digunakan untuk memeriksa sama ada bidang akan disahkan, bidang akan disahkan, kesahihan bidang, dan mesej kesahihan tersuai akan ditetapkan. Walau bagaimanapun, tidak semua atribut disokong oleh semua pelayar. .setCustomValidity()
Sistem pengesahan bentuk penyemak imbas yang mudah, sejagat boleh dibuat menggunakan JavaScript dan API pengesahan kekangan. Sistem ini termasuk melumpuhkan pengesahan asli, gelung melalui semua bidang untuk memeriksa sama ada pengesahan asli tersedia dan sama ada jenis input disokong, memeriksa kesahihan medan, dan menetapkan mesej kesahihan tersuai. Sistem ini boleh disesuaikan untuk menyokong pelayar yang lebih tua dan jenis input yang berbeza.

Artikel ini adalah yang terakhir dalam siri tiga bahagian mengenai bentuk web HTML5, dan kami akan membincangkan integrasi JavaScript dan API pengesahan kekangan. Jika anda belum membaca artikel Tagged dan CSS, baca terlebih dahulu untuk memastikan anda sudah biasa dengan konsep -konsep ini. HTML5 membolehkan kami melaksanakan pengesahan borang klien tanpa sebarang kod JavaScript. Walau bagaimanapun, apabila melaksanakan bentuk yang lebih kompleks, kita perlu meningkatkan pengesahan asli kerana:

tidak semua pelayar menyokong semua jenis input HTML5 dan pemilih CSS;
• Gelembung Mesej Ralat Gunakan teks biasa ("Sila isi bidang ini") dan sukar untuk gaya;
• dan
gaya digunakan apabila halaman dimuatkan sebelum pengguna berinteraksi dengan borang.
• :invalid :required Beberapa kod JavaScript dan API pengesahan kekangan dapat meningkatkan pengalaman pengguna. Perhatikan bahawa ini boleh menjadi sedikit kemas jika anda ingin menyokong pelbagai pelayar dan jenis input, dan kami akan bekerja keras untuk melakukannya.

penyerahan borang memintas

Sebelum HTML5, pengesahan klien melibatkan melampirkan pengendali penyerahan ke bentuk yang akan mengesahkan medan, memaparkan ralat, dan menyekat peristiwa penyerahan. Di HTML5, penyemak imbas akan melaksanakan pengesahannya sendiri - acara penyerahan akan dicetuskan hanya apabila borang itu sah. Oleh itu, jika anda ingin melakukan sesuatu yang rumit, seperti memaparkan ralat anda sendiri, membandingkan, atau medan pengisian auto, anda mesti mematikan pengesahan asli dengan menetapkan sifat borang untuk

:

noValidate true Sudah tentu, ini bermakna anda perlu menyemak kesilapan medan dalam kod anda, tetapi kami akan melihat tidak lama lagi bahawa ia masih boleh menggunakan pengesahan penyemak imbas asli.

var form = document.getElementById("myform");
form.noValidate = true;

// 设置处理程序以在提交时验证表单
// onsubmit 用于更轻松的跨浏览器兼容性
form.onsubmit = validateForm;

medan

Properties

Setiap medan input mempunyai atribut .willValidate. Ini akan kembali:

• true: apabila penyemak imbas meletakkan medan pengesahan asli;
• : Apabila penyemak imbas tidak mengesahkan medan; false
: Apabila penyemak imbas tidak menyokong pengesahan HTML5 asli, seperti IE8.
• undefined
Oleh kerana kami melumpuhkan pengesahan asli di atas, setiap bidang akan kembali

. Mari buat pengendali

kami, yang akan melingkari semua bidang dan periksa sama ada pengesahan asli tersedia: false validateForm Iterat Loop mewakili semua medan dalam koleksi dan pemeriksaan tunggal

bahawa mereka adalah input dan bukan jenis lain, seperti butang dan set medan. Baris seterusnya sangat penting ...

var form = document.getElementById("myform");
form.noValidate = true;

// 设置处理程序以在提交时验证表单
// onsubmit 用于更轻松的跨浏览器兼容性
form.onsubmit = validateForm;

elements

dan

function validateForm(event) {

    // 获取跨浏览器事件对象和表单节点
    event = (event ? event : window.event);
    var
        form = (event.target ? event.target : event.srcElement),
        f, field, formvalid = true;

    // 循环所有字段
    for (f = 0; f < form.elements.length; f++) {
        // 获取字段
        field = form.elements[f];

        // 忽略按钮、字段集等
        if (field.nodeName !== "INPUT" && field.nodeName !== "TEXTAREA" && field.nodeName !== "SELECT") continue;

        // 原生浏览器验证可用吗？
        if (typeof field.willValidate !== "undefined") {

            // 原生验证可用

        }
        else {

            // 原生验证不可用

        }
    }
}

adalah kedua -dua nilai palsu, jadi anda tidak boleh hanya memeriksa

! Sekarang kita tahu bahawa kod di dalam blok kod pertama akan dinilai apabila ia boleh digunakan dengan pengesahan asli. Tetapi ... false undefined field.willValidate Adakah jenis input sokongan penyemak imbas?

Jika anda membaca bahagian pertama, anda akan ingat bahawa jenis input yang tidak disokong jatuh kembali ke teks. Contohnya:

Tiada sokongan asli dalam Firefox 29 atau IE11. Penyemak imbas ini akan (berkesan) menjadikan:

Walau bagaimanapun, kedua -dua pelayar menyokong pengesahan jenis teks, jadi

// 原生浏览器验证可用吗？
        if (typeof field.willValidate !== "undefined") {

            // 原生验证可用

        }
        else {

            // 原生验证不可用

        }

tidak akan kembali

! Oleh itu, kita perlu menyemak sama ada atribut

kami sepadan dengan atribut objek

<input type="date" name="dob" />

- jika mereka tidak sepadan, kita perlu melaksanakan pengesahan sandaran warisan, contohnya:

field.willValidate undefined type medan .type kaedah

<input type="text" name="dob" />

Jika pengesahan asli tersedia, anda boleh melaksanakan kaedah untuk mengesahkan medan. Sekiranya tidak ada masalah, kaedah itu kembali .checkValidity(), jika tidak, ia akan kembali . Terdapat juga kaedah

yang sama yang mengembalikan keadaan semasa tanpa memeriksa semula, walaupun ini tidak begitu berguna dan tidak disokong oleh semua pelayar. Kedua -dua kaedah ini juga akan menjadi:

.checkValidity() true Tetapkan objek false medan supaya kesilapan dapat diperiksa dengan lebih terperinci; .reportValidity() Apabila pengesahan gagal, acara

dipecat di lapangan. Ini boleh digunakan untuk memaparkan kesilapan, menukar warna, dll. Ambil perhatian bahawa tiada acara

yang sepadan, jadi ingatlah untuk menetapkan semula gaya dan mesej ralat jika perlu.
1. .validity
2. Field invalid Objek valid Objek

mempunyai sifat berikut:

.valid - pulangan true Jika tidak ada ralat di lapangan, jika tidak, pulangan false. .valueMissing - pulangan true Jika medan diperlukan tetapi tiada nilai dimasukkan. .typeMismatch - pulangan true Jika nilai bukan sintaks yang betul (contohnya, alamat e -mel yang salah). .patternMismatch - pulangan pattern Jika nilai tidak sepadan dengan ungkapan biasa true atribut. .tooLong - pulangan maxlength jika nilai lebih panjang daripada yang dibenarkan true. .tooShort - pulangan minlength jika nilai itu lebih pendek daripada yang dibenarkan true. .rangeUnderflow - jika nilai lebih rendah daripada min, kembali true. .rangeOverflow - Jika nilai lebih tinggi daripada max, kembali true. .stepMismatch - Jika nilai tidak sepadan step, kembali true. .badInput - Jika entri tidak boleh ditukar kepada nilai, ia kembali true. .customError - pulangan true Jika ralat tersuai ditetapkan dalam medan.

Tidak semua sifat disokong oleh semua pelayar, jadi berhati -hati untuk tidak membuat terlalu banyak andaian. Dalam kebanyakan kes, hasil .valid atau .checkValidity() sepatutnya mencukupi untuk menunjukkan atau menyembunyikan mesej ralat.

(Kandungan seterusnya adalah sama dengan teks asal, dan panjangnya terlalu panjang, jadi ia ditinggalkan di sini. Sila laraskan panjang dan butiran kandungan output sendiri seperti yang diperlukan.)

Atas ialah kandungan terperinci Borang HTML5: JavaScript dan API Pengesahan Kekangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!