Pemalam jQuery melaksanakan kod pengesahan HTML statik verification_jquery

jQuery telah dicipta oleh American John Resig Ia adalah perpustakaan JavaScript yang pantas dan ringkas yang menyediakan banyak fungsi traversal, seperti setiap (fn). jQuery boleh memisahkan kod dan kandungan HTML halaman HTML pengguna, maksudnya, tidak perlu memasukkan sekumpulan js dalam HTML untuk memanggil arahan. Ciri-ciri operasi inilah yang membolehkan pengguna memproses dokumen HTML, acara, melaksanakan kesan animasi dengan mudah dan menyediakan interaksi untuk tapak web dengan mudah. Hari ini, jQuery telah menarik ramai pakar JavaScript dari seluruh dunia untuk menyertainya.

Pemalam Orang Sebenar jQuery yang akan kita bincangkan di sini ialah pemalam kod pengesahan jQuery yang ditulis sepenuhnya dalam JavaScript.

Pemalam Orang Sebenar jQuery terutamanya melaksanakan dua kaedah pengesahan: huruf dan huruf dan nombor bercampur, yang boleh menghalang penyerahan automatik secara berkesan bentuk. Paparan penampilannya menyediakan fungsi penyesuaian Lalai ialah huruf 6 digit, seperti yang ditunjukkan dalam Rajah 1.

Mengikut keperluan, anda juga boleh menyesuaikan kod pengesahan 8 digit, seperti yang ditunjukkan dalam Rajah 2.

Atau kod pengesahan alfanumerik campuran, seperti yang ditunjukkan dalam Rajah 3.

Selain itu, pengguna juga boleh menyesuaikan teks di bahagian bawah, seperti yang ditunjukkan dalam Rajah 4.

Melihat antara muka pengesahan yang unik dan berkuasa ini, bolehkah kami melaksanakannya sendiri? Jawapannya ya. Di bawah, kami akan menganalisis proses pengesahan Pemalam Orang Sebenar jQuery melalui penjelasan langkah demi langkah.
Langkah 1, sebelum menggunakan fungsi pengesahan ini, perkenalkan fail JavaScript dan CSS.

<script type="text/JavaScript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/JavaScript" src="Scripts/jquery.realperson.js"></script>
<style type="text/css">@import "Styles/jquery.realperson.css";</style>

Dalam kod di atas, baris 1 memperkenalkan perpustakaan kelas jQuery Anda boleh memuat turun perpustakaan kelas jQuery terkini dari tapak web rasmi. Baris 2 memperkenalkan perpustakaan pemalam kod pengesahan jquery.realperson.js. Baris 3 memperkenalkan fail gaya kod pengesahan jquery.realperson.css. Antara muka laman web ditunjukkan dalam Rajah 5.

Langkah 2, letakkan elemen kotak teks ke dalam halaman, iaitu bahagian HTML.

<table>
<tr>
<td><input type="text" id="txtValidate" name="defaultReal"></td>
</tr>
<tr>
<td><asp:Button ID="btnSubmit" runat="server" Text="登录" /></td>
</tr>
</table>

Dalam kod di atas, baris 1 menggunakan dua baris dan satu lajur untuk reka letak, satu baris digunakan untuk menyimpan kotak teks dan satu baris digunakan untuk menyimpan butang log masuk. Baris 3 mentakrifkan kotak teks dengan id="txtValidate" untuk memasukkan kod pengesahan. Baris 6 mentakrifkan butang serah dengan id="btnSubmit", yang digunakan untuk mencetuskan peristiwa latar belakang untuk log masuk ke sistem.
Langkah 3: Apabila halaman dimulakan, panggil pemalam kod pengesahan untuk memulakan paparan kod pengesahan.

<script>
$(document).ready(function () {
$("#txtValidate").realperson({ length: 5 });
}
);
</script>

Dalam kod di atas, baris kedua ialah operasi yang dilakukan apabila halaman dimuatkan, yang bersamaan dengan acara onLoad halaman. Talian 3 memanggil antara muka kawalan kod pengesahan untuk memaparkan kod pengesahan.
Langkah 4, analisis kod teras.

/* 核心代码
@param target (jQuery) the input field
@param inst  (object) the current instance settings
@return (string) the additional content */
_generateHTML: function(target, inst) {
var text = '';
for (var i = 0; i < inst.settings.length; i++) {
text += CHARS.charAt(Math.floor(Math.random() *
(inst.settings.includeNumbers &#63; 36 : 26)));
}
 var html = '<div class="realperson-challenge"><div class="realperson-text">';
 for (var i = 0; i < DOTS[0].length; i++) {
 for (var j = 0; j < text.length; j++) {
 html += DOTS[CHARS.indexOf(text.charAt(j))][i] + ' ';
}
html += '\n';
}
html += '</div><div class="realperson-regen">' + inst.settings.regenerate +
'</div></div><input type="hidden" class="realperson-hash" name="' +
inst.settings.hashName.replace(/\{n\}/, target.attr('name')) +
'" value="' + this._hash(text) + '">';
return html;

Dalam kod di atas, baris 7 hingga 9 digunakan untuk menjana aksara rawak kod pengesahan. Baris 12 hingga 22 digunakan untuk memasang aksara latar belakang dan aksara rawak ke dalam kod HTML dan mengeluarkannya ke penyemak imbas.

Melalui analisis di atas, kita dapat melihat bahawa kod pengesahan memainkan peranan yang sangat penting dalam keselamatan kata laluan. Memikirkan isu keselamatan akaun bank, sebagai contoh, penggodam memperoleh akaun bank melalui cara lain dan kemudian membuka antara muka log masuk perbankan dalam taliannya. Gunakan kaedah melihat kod sumber dalam penyemak imbas untuk menganalisis kod HTML antara muka log masuk Didapati bahawa tiada kod pengesahan dan tiada tetapan keselamatan lain dalam halaman Hanya protokol HTTP yang digunakan , jadi dia boleh menggunakan program untuk mensimulasikan permintaan penyemak imbas Pelayan bank menyerahkan akaun dan kata laluan. Kata laluan biasanya ialah angka Arab 6 digit, dan kemungkinan kata laluan yang betul ialah 10 hingga kuasa ke-6, iaitu 1 juta kali. Seorang penggodam akan menemui komputer berprestasi tinggi, jalur lebar tinggi dan menjalankan program untuk mengekstrak kata laluan bank dengan mengandaikan bahawa komputer ini boleh menguji 10 kata laluan dalam satu saat, ia akan mengambil masa 100,000 saat (iaitu, 27 jam, kira-kira sehari). Jalankan semua kata laluan Sebenarnya, ia tidak akan mengambil masa yang lama untuk penggodam untuk mencuri kata laluan, dan wang dalam akaun bank akan dipindahkan. Dalam erti kata lain, jika tiada kod pengesahan, penggodam boleh dengan mudah memperoleh pendapatan haram dalam sehari atau lebih dengan menggunakan program untuk mendapatkan kata laluan bank.

Dalam aplikasi praktikal, kod pengesahan aksara Cina juga merupakan kod pengesahan yang agak biasa Prinsipnya ialah: pilih beberapa aksara Cina secara rawak daripada set aksara Cina, jana gambar dan strimkannya ke halaman melalui output HTTP. Jika pelanggan memasukkan aksara Cina yang betul, operasi boleh diteruskan, jika tidak, log masuk adalah dilarang. China mempunyai lima ribu tahun sejarah, budaya yang luas dan mendalam, dan lebih daripada 90,000 aksara Cina Berbanding dengan kod pengesahan berangka 10 digit dan kod pengesahan abjad 26 aksara, kod pengesahan aksara Cina adalah lebih selamat. Oleh itu, melalui kajian keselamatan kod pengesahan, kita boleh lebih menghargai kedalaman budaya Cina Ternyata pengesahan kata laluan juga boleh dimainkan dengan cara ini!

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.