cari

Rumah  >  Artikel  >  hujung hadapan web  >  Penjelasan terperinci tentang pengesahan borang dalam pengetahuan JavaScript_Basic

Penjelasan terperinci tentang pengesahan borang dalam pengetahuan JavaScript_Basic

WBOY
WBOYasal
2016-05-16 15:54:30955semak imbas

Pengesahan borang digunakan untuk berlaku pada pelayan, selepas pelanggan memasukkan semua data yang diperlukan dan kemudian menekan butang hantar. Jika beberapa data yang telah dimasukkan oleh pelanggan telah berada dalam bentuk yang salah atau hilang semata-mata, maka pelayan perlu menghantar semua data kembali kepada pelanggan dan meminta borang itu diserahkan semula dengan maklumat yang betul. Ini adalah proses yang panjang yang meningkatkan beban pada pelayan.

JavaScript menyediakan cara untuk mengesahkan data borang pada komputer pelanggan sebelum menghantarnya ke pelayan web. Pengesahan borang biasanya dilakukan dalam dua cara.

  1. Pengesahan Asas - Pertama, borang mesti disemak untuk memastikan kemasukan data diperlukan untuk setiap medan borangnya. Ini hanya akan melingkari setiap medan jadual dan menyemak data.
  2. Pengesahan format data - Kedua, data yang dimasukkan mesti disemak untuk format dan nilai yang betul. Ini memerlukan lebih banyak logik untuk menguji ketepatan data.

Kami akan memberikan contoh untuk memahami proses pengesahan. Berikut ialah bentuk mudah: 

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
 <form action="/cgi-bin/test.cgi" name="myForm" 
     onsubmit="return(validate());">
 <table cellspacing="2" cellpadding="2" border="1">
 <tr>
  <td align="right">Name</td>
  <td><input type="text" name="Name" /></td>
 </tr>
 <tr>
  <td align="right">EMail</td>
  <td><input type="text" name="EMail" /></td>
 </tr>
 <tr>
  <td align="right">Zip Code</td>
  <td><input type="text" name="Zip" /></td>
 </tr>
 <tr>
 <td align="right">Country</td>
 <td>
 <select name="Country">
  <option value="-1" selected>[choose yours]</option>
  <option value="1">USA</option>
  <option value="2">UK</option>
  <option value="3">INDIA</option>
 </select>
 </td>
 </tr>
 <tr>
  <td align="right"></td>
  <td><input type="submit" value="Submit" /></td>
 </tr>
 </table>
 </form>
 </body>
 </html>

Pengesahan borang asas:

Pertama, kami akan menunjukkan kepada anda cara melakukan pengesahan borang asas. Jadual di atas memerlukan fungsi validate() untuk mengesahkan data sebelum peristiwa onsubmit berlaku. Berikut ialah pelaksanaan fungsi validate(): 

<script type="text/javascript">
<!--
// Form validation code will come here.
function validate()
{
 
  if( document.myForm.Name.value == "" )
  {
   alert( "Please provide your name!" );
   document.myForm.Name.focus() ;
   return false;
  }
  if( document.myForm.EMail.value == "" )
  {
   alert( "Please provide your Email!" );
   document.myForm.EMail.focus() ;
   return false;
  }
  if( document.myForm.Zip.value == "" ||
      isNaN( document.myForm.Zip.value ) ||
      document.myForm.Zip.value.length != 5 )
  {
   alert( "Please provide a zip in the format #####." );
   document.myForm.Zip.focus() ;
   return false;
  }
  if( document.myForm.Country.value == "-1" )
  {
   alert( "Please provide your country!" );
   return false;
  }
  return( true );
}
//-->
</script>


Pengesahan format data:

Sekarang kita akan melihat bagaimana kita mengesahkan data borang yang kita masukkan sebelum menyerahkannya ke pelayan web.

Contoh ini menunjukkan cara untuk mengesahkan alamat e-mel yang dimasukkan, yang bermaksud bahawa alamat e-mel mesti mengandungi sekurang-kurangnya simbol @ dan titik (.). Selain itu, @ mestilah bukan aksara pertama alamat e-mel dan titik terakhir mestilah satu aksara selepas simbol @: 

<script type="text/javascript">
<!--
function validateEmail()
{
 
  var emailID = document.myForm.EMail.value;
  atpos = emailID.indexOf("@");
  dotpos = emailID.lastIndexOf(".");
  if (atpos < 1 || ( dotpos - atpos < 2 )) 
  {
    alert("Please enter correct email ID")
    document.myForm.EMail.focus() ;
    return false;
  }
  return( true );
}
//-->
</script>

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript AOP pengaturcaraan examples_javascript kemahiranArtikel seterusnya：JavaScript AOP pengaturcaraan examples_javascript kemahiran

Artikel berkaitan

Lihat lagi