Sebagai bahagian terpenting dalam HTML, borang dicerminkan pada hampir setiap halaman web, seperti maklumat penyerahan pengguna, maklumat maklum balas pengguna, maklumat pertanyaan pengguna, dll., jadi ia adalah komunikasi antara pentadbir tapak web dan penonton. Berikut ialah pengenalan kepada cara jQuery melaksanakan pengesahan borang melalui kod contoh
Pengesahan borang
Sebagai komponen HTML yang paling penting, borang hampir Ia dicerminkan pada setiap halaman web, seperti maklumat penyerahan pengguna, maklumat maklum balas pengguna dan maklumat pertanyaan pengguna, dsb., jadi ia merupakan jambatan komunikasi antara pentadbir laman web dan penonton. Dalam borang, peranan pengesahan borang juga sangat penting. Ia boleh menjadikan borang lebih fleksibel, cantik dan kaya.
Ambil pendaftaran pengguna mudah sebagai contoh. Mula-mula buat borang baharu, kod HTML adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jQueryStudy</title>
<style type="text/css">
.int{ height: 30px; text-align: left; width: 600px; }
label{ width: 200px; margin-left: 20px; }
.high{ color: red; }
.msg{ font-size: 13px; }
.onError{ color: red; }
.onSuccess{ color: green; }
</style>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>
<form method="post" action="">
<p class="int">
<label for="name">名称：</label>
<input type="text" id="name" class="required" />
</p>
<p class="int">
<label for="email">邮箱：</label>
<input type="text" id="email" class="required" />
</p>
<p class="int">
<label for="address">地址：</label>
<input type="text" id="personinfo" />
</p>
<p class="int">
<input type="submit" value="提交" id="send" style="margin-left: 70px;" />
<input type="reset" value="重置" id="res" />
</p>
</form>
<script type="text/javascript"></script>
</body>
</html>Kesan paparan ditunjukkan dalam Rajah 1.
Rajah 1 Permulaan Borang
Kotak teks dengan atribut kelas "diperlukan" dalam borang mesti diisi, jadi ia perlu diasingkan daripada elemen bukan Borang lain yang mesti diisi dibezakan dengan menambahkan asterisk merah selepas kotak teks. Ini boleh dilakukan menggunakan kaedah append() Kod adalah seperti berikut:
<script type="text/javascript">
//为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
$("form :input.required").each(function () {
//创建元素
var $required = $("<strong class='high'>*</strong>");
//将它追加到文档中
$(this).parent().append($required);
});
</script>Kesan paparan ditunjukkan dalam Rajah 2.
Rajah 2 Ditandakan dengan bintang merah kecil
Selepas pengguna mengisi maklumat dalam kotak teks "Nama", tukar fokus kursor daripada kotak teks "Nama" Apabila berpindah keluar, adalah perlu untuk segera menentukan sama ada nama itu mematuhi peraturan pengesahan. Apabila fokus kursor bergerak keluar dari kotak teks "Peti Mel", ia juga perlu untuk segera menentukan sama ada "Peti Mel" diisi dengan betul, jadi perlu menambah peristiwa kehilangan fokus, iaitu peristiwa kabur , kepada unsur bentuk.
Kod jQuery adalah seperti berikut:
<script type="text/javascript">
//为表单的元素添加失去焦点事件
$("form :input").blur(function () {
// ...省略代码
});
</script>Langkah-langkah untuk mengesahkan elemen borang adalah seperti berikut:
(1) Tentukan sama ada elemen yang sedang kehilangan fokus adalah "nama" atau "peti mel", dan kemudian Rawat mereka secara berasingan.
(2) Jika ia ialah "nama", tentukan sama ada panjang nilai elemen adalah kurang daripada 6. Jika kurang daripada 6, gunakan fon merah untuk mengingatkan pengguna bahawa input adalah salah , gunakan hijau untuk mengingatkan pengguna bahawa input adalah betul.
(3) Jika ia adalah "peti mel", tentukan sama ada nilai elemen mematuhi format peti mel Jika tidak, gunakan fon merah untuk mengingatkan pengguna bahawa input adalah salah fon hijau untuk mengingatkan pengguna bahawa input adalah betul.
(4) Tambahkan maklumat peringatan pada penghujung elemen induk semasa.
Nota: Untuk kemudahan penggunaan, apabila kandungan dalam kotak teks teks berada dalam format yang salah, program harus cuba memaparkan semua gesaan dan bukannya hanya peringatan ralat yang berkaitan dengan setiap format selepas mengesahkannya.
Berdasarkan analisis di atas, kod jQuery berikut boleh ditulis:
<script type="text/javascript">
//为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
$("form :input.required").each(function () {
//创建元素
var $required = $("<strong class='high'>*</strong>");
//将它追加到文档中
$(this).parent().append($required);
});
//为表单元素添加失去焦点事件
$("form :input").blur(function(){
var $parent = $(this).parent();
//验证名称
if($(this).is("#name")){
if($.trim(this.value) == "" || $.trim(this.value).length < 6){
var errorMsg = " 请输入至少6位的名称！";
//class='msg onError' 中间的空格是层叠样式的格式
$parent.append("<span class='msg onError'>" + errorMsg + "</span>");
}
else{
var okMsg=" 输入正确";
$parent.find(".high").remove();
$parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
}
}
//验证邮箱
if($(this).is("#email")){
if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){
var errorMsg = " 请输入正确的E-Mail地址！";
$parent.append("<span class='msg onError'>" + errorMsg + "</span>");
}
else{
var okMsg=" 输入正确";
$parent.find(".high").remove();
$parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
}
}
});
</script>Apabila format yang salah dimasukkan beberapa kali berturut-turut, kesan yang ditunjukkan dalam Rajah 3 akan muncul
Rajah 3 Kesan segera dari pelbagai operasi
kerana setiap kali elemen kehilangan fokus, elemen peringatan baru akan dibuat dan kemudian dilampirkan ke dokumen Mesej peringatan muncul beberapa kali. Oleh itu, anda perlu memadamkan semua elemen peringatan sebelumnya bagi elemen semasa sebelum membuat elemen peringatan. Ini boleh dilakukan menggunakan kaedah remove() Kod adalah seperti berikut:
//为表单元素添加失去焦点事件
$("form :input").blur(function(){
var $parent = $(this).parent();
$parent.find(".msg").remove(); //删除以前的提醒元素
// ...省略代码
});Kesan paparan ditunjukkan dalam Rajah 4.
Rajah 4 Kesan betul
Apabila tetikus kehilangan fokus beberapa kali dalam elemen borang, ia boleh mengingatkan pengguna sama ada pengisiannya betul. Walau bagaimanapun, jika pengguna mengabaikan peringatan ralat dan berkeras untuk mengklik butang "Serah", untuk mengisi borang dengan tepat, unsur-unsur borang yang diperlukan perlu disahkan sepenuhnya sebelum menyerahkan borang. Anda boleh terus menggunakan kaedah pencetus() untuk mencetuskan peristiwa kabur untuk mencapai kesan pengesahan. Sekiranya terdapat kesilapan dalam mengisi, pengguna akan diingatkan dengan warna merah jika nama dan alamat e-mel tidak mematuhi peraturan, maka terdapat dua ralat, iaitu terdapat dua elemen dengan kelas "onError", jadi panjang elemen dengan kelas "onError" boleh ditentukan untuk menentukan sama ada ia boleh diserahkan. Jika panjangnya 0, iaitu benar, ia bermakna ia boleh diserahkan jika panjangnya lebih daripada 0, iaitu palsu, ia bermakna terdapat ralat dan penyerahan borang perlu dihalang. Untuk mengelakkan penyerahan borang, anda boleh terus menggunakan pernyataan "return false".
Menurut analisis di atas, kod jQuery berikut boleh ditulis dalam acara penyerahan:
//点击重置按钮时，触发文本框的失去焦点事件
$("#send").click(function(){
//trigger 事件执行完后，浏览器会为submit按钮获得焦点
$("form .required:input").trigger("blur");
var numError = $("form .onError").length;
if(numError){
return false;
}
alert("注册成功，密码已发到你的邮箱");
});Kesan paparan ditunjukkan dalam Rajah 5.
图 5 正确提交
用户也许会提出：为什么每次都要等字段元素失去焦点后，才提醒是否正确？如果输入时就可以提醒，这样就可以更加即时了。
为了达到用户提出的需求，需要给表单元素绑定 keyup 事件和 focus 事件，keyup 事件能在用户每次松开按键时触发，实现即时提醒；focus 事件能在元素得到焦点的时候触发，也可以实现即时提醒。
代码如下：
$("form :input").blur(function(){
//失去焦点处理函数
//代码省略...
}).keyup(function(){
//triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});这样当用户将光标定位到文本框上和改变文本框的值时，表单就会即时提醒用户填写是否正确，从而符合了用户的需求。
在前面的章节已经提过，trigger（“blur”）不仅会触发为元素绑定的blur事件，也会触发浏览器默认的 blur 事件，即不能讲光标定位到文本框上。而 triggerHandler（“blur”）只会触发为元素绑定的 blur 事件，而不触发浏览器默认的 blur 事件。
至此，表单验证过程就全部完成。读者可以根据自己的实际需求修改验证规则。
注：客户端的验证仅用于提升用户的操作体验，而服务器仍需对用户输入的数据的合法性进行校验。对于禁用了脚本的用户和用户自制的网页提交操作，必须在服务器端验证。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jQueryStudy</title>
<style type="text/css">
.int{ height: 30px; text-align: left; width: 600px; }
label{ width: 200px; margin-left: 20px; }
.high{ color: red; }
.msg{ font-size: 13px; }
.onError{ color: red; }
.onSuccess{ color: green; }
</style>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>
<form method="post" action="">
<p class="int">
<label for="name">名称：</label>
<input type="text" id="name" class="required" />
</p>
<p class="int">
<label for="email">邮箱：</label>
<input type="text" id="email" class="required" />
</p>
<p class="int">
<label for="address">地址：</label>
<input type="text" id="personinfo" />
</p>
<p class="int">
<input type="submit" value="提交" id="send" style="margin-left: 70px;" />
<input type="reset" value="重置" id="res" />
</p>
</form>
<script type="text/javascript">
$(document).ready(function(){
//为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
$("form :input.required").each(function(){
//创建元素
var $required = $("<strong class='high'>*</strong>");
//将它追加到文档中
$(this).parent().append($required);
});
//为表单的必填文本框添加相关事件（blur、focus、keyup）
$("form :input").blur(function(){
//注意：这里的this是DOM对象，$(this)才是jQuery对象
var $parent = $(this).parent();
//删除之前的错误提醒信息
$parent.find(".msg").remove();
//验证“名称”
if($(this).is("#name")){
//运用jQuery中的$.trim()方法，去掉首位空格
if($.trim(this.value) == "" || $.trim(this.value).length < 6){
var errorMsg = " 请输入至少6位的名称！";
//class='msg onError' 中间的空格是层叠样式的格式
$parent.append("<span class='msg onError'>" + errorMsg + "</span>");
}
else{
var okMsg=" 输入正确";
$parent.find(".high").remove();
$parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
}
}
//验证邮箱
if($(this).is("#email")){
if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){
var errorMsg = "请输入正确的E-Mail地址！";
$parent.append("<span class='msg onError'>" + errorMsg + "</span>");
}
else{
var okMsg=" 输入正确";
$parent.find(".high").remove();
$parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
}
}
}).keyup(function(){
//triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
//点击重置按钮时，触发文本框的失去焦点事件
$("#send").click(function(){
//trigger 事件执行完后，浏览器会为submit按钮获得焦点
$("form .required:input").trigger("blur");
var numError = $("form .onError").length;
if(numError){
return false;
}
alert("注册成功，密码已发到你的邮箱");
});
});
</script>
</body>
</html>jQuery 官方 API： http://api.jquery.com/
以上就是jQuery 实现表单验证功能的全部内容，希望对大家有所帮助，更多相关教程请访问jQuery视频教程！
Peranan JavaScript: Membuat Web Interaktif dan DinamikApr 24, 2025 am 12:12 AMJavaScript adalah di tengah -tengah laman web moden kerana ia meningkatkan interaktiviti dan dinamik laman web. 1) Ia membolehkan untuk menukar kandungan tanpa menyegarkan halaman, 2) memanipulasi laman web melalui Domapi, 3) menyokong kesan interaktif kompleks seperti animasi dan drag-and-drop, 4) mengoptimumkan prestasi dan amalan terbaik untuk meningkatkan pengalaman pengguna.
C dan JavaScript: Sambungan dijelaskanApr 23, 2025 am 12:07 AMC dan JavaScript mencapai interoperabilitas melalui webassembly. 1) Kod C disusun ke dalam modul WebAssembly dan diperkenalkan ke dalam persekitaran JavaScript untuk meningkatkan kuasa pengkomputeran. 2) Dalam pembangunan permainan, C mengendalikan enjin fizik dan rendering grafik, dan JavaScript bertanggungjawab untuk logik permainan dan antara muka pengguna.
Dari laman web ke aplikasi: Aplikasi pelbagai JavaScriptApr 22, 2025 am 12:02 AMJavaScript digunakan secara meluas di laman web, aplikasi mudah alih, aplikasi desktop dan pengaturcaraan sisi pelayan. 1) Dalam pembangunan laman web, JavaScript mengendalikan DOM bersama -sama dengan HTML dan CSS untuk mencapai kesan dinamik dan menyokong rangka kerja seperti JQuery dan React. 2) Melalui reaktnatif dan ionik, JavaScript digunakan untuk membangunkan aplikasi mudah alih rentas platform. 3) Rangka kerja elektron membolehkan JavaScript membina aplikasi desktop. 4) Node.js membolehkan JavaScript berjalan di sisi pelayan dan menyokong permintaan serentak yang tinggi.
Python vs JavaScript: Gunakan Kes dan Aplikasi MembandingkanApr 21, 2025 am 12:01 AMPython lebih sesuai untuk sains data dan automasi, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python berfungsi dengan baik dalam sains data dan pembelajaran mesin, menggunakan perpustakaan seperti numpy dan panda untuk pemprosesan data dan pemodelan. 2. Python adalah ringkas dan cekap dalam automasi dan skrip. 3. JavaScript sangat diperlukan dalam pembangunan front-end dan digunakan untuk membina laman web dinamik dan aplikasi satu halaman. 4. JavaScript memainkan peranan dalam pembangunan back-end melalui Node.js dan menyokong pembangunan stack penuh.
Peranan C/C dalam JavaScript Jurubah dan PenyusunApr 20, 2025 am 12:01 AMC dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.
JavaScript in Action: Contoh dan projek dunia nyataApr 19, 2025 am 12:13 AMAplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.
JavaScript dan Web: Fungsi teras dan kes penggunaanApr 18, 2025 am 12:19 AMPenggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.
Memahami Enjin JavaScript: Butiran PelaksanaanApr 17, 2025 am 12:05 AMMemahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
