Penjelasan terperinci tentang pengesahan borang dalam pengetahuan JavaScript

Penjelasan terperinci tentang pengesahan borang dalam pengetahuan JavaScript_Basic

WBOY

Lepaskan： 2016-05-16 15:54:30

asal

952 orang telah melayarinya

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.

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.
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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk