Pengesahan borang JavaScript
Pengesahan Borang JavaScript
Pengesahan Borang JavaScript
JavaScript tersedia untuk mengesahkan data input dalam bentuk HTML sebelum data dihantar ke pelayan.
Data borang selalunya memerlukan JavaScript untuk mengesahkan ketepatannya:
Sahkan sama ada data borang kosong?
Sahkan bahawa input adalah alamat e-mel yang betul?
Sahkan bahawa tarikh dimasukkan dengan betul?
Sahkan sama ada kandungan input borang adalah angka?
Item yang diperlukan (atau diperlukan)
Fungsi berikut digunakan untuk menyemak sama ada pengguna telah mengisi item yang diperlukan (atau diperlukan) dalam borang. Jika medan yang diperlukan atau medan yang diperlukan kosong, kotak amaran akan muncul dan nilai pulangan fungsi adalah palsu Jika tidak, nilai pulangan fungsi adalah benar (bermaksud tiada masalah dengan data):
fungsi validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
makluman ("Nama akhir mesti diisi");
return false;
}
}
Fungsi di atas dipanggil apabila borang diserahkan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
alert("姓必須填寫");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>Pengesahan E-mel
Fungsi berikut menyemak sama ada data yang dimasukkan mematuhi sintaks asas alamat e-mel.
Ini bermakna data input mesti mengandungi simbol @ dan noktah (.). Pada masa yang sama, @ tidak boleh menjadi aksara pertama alamat e-mel dan mesti ada sekurang-kurangnya satu tempoh selepas @:
function validateForm(){
var x=document.forms["myForm "]["emel "].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 ||. dotpos+2>=x.length){
makluman("Bukan alamat e-mel yang sah");
return false;
}
}
Berikut ialah kod lengkap bersama borang HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("不是一個有效的 e-mail 地址");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>
