Gunakan jQuery untuk melaksanakan pengesahan borang-tutorial js-php.cn

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>

Salin selepas log masuk

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=&#39;high&#39;>*</strong>");
 //将它追加到文档中
 $(this).parent().append($required);
 });
</script>

Salin selepas log masuk

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>

Salin selepas log masuk

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=&#39;high&#39;>*</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=&#39;msg onError&#39; 中间的空格是层叠样式的格式
  $parent.append("<span class=&#39;msg onError&#39;>" + errorMsg + "</span>");
  }
  else{
  var okMsg=" 输入正确";
  $parent.find(".high").remove();
  $parent.append("<span class=&#39;msg onSuccess&#39;>" + 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=&#39;msg onError&#39;>" + errorMsg + "</span>");
  }
  else{
  var okMsg=" 输入正确";
  $parent.find(".high").remove();
  $parent.append("<span class=&#39;msg onSuccess&#39;>" + okMsg + "</span>");
  }
 }
 });
</script>

Salin selepas log masuk

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(); //删除以前的提醒元素
 // ...省略代码
});

Salin selepas log masuk

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("注册成功，密码已发到你的邮箱");
});

Salin selepas log masuk

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

Salin selepas log masuk

这样当用户将光标定位到文本框上和改变文本框的值时，表单就会即时提醒用户填写是否正确，从而符合了用户的需求。

在前面的章节已经提过，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=&#39;high&#39;>*</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=&#39;msg onError&#39; 中间的空格是层叠样式的格式
   $parent.append("<span class=&#39;msg onError&#39;>" + errorMsg + "</span>"); 
  }
  else{
   var okMsg=" 输入正确";
   $parent.find(".high").remove();
   $parent.append("<span class=&#39;msg onSuccess&#39;>" + 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=&#39;msg onError&#39;>" + errorMsg + "</span>");
  }
  else{
   var okMsg=" 输入正确";
   $parent.find(".high").remove();
   $parent.append("<span class=&#39;msg onSuccess&#39;>" + 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>

Salin selepas log masuk

jQuery 官方 API： http://api.jquery.com/

以上就是jQuery 实现表单验证功能的全部内容，希望对大家有所帮助，更多相关教程请访问jQuery视频教程！