JavaScript フォームの検証
JavaScript を使用すると、データがサーバーに送信される前に、HTML フォーム內(nèi)のこれらの入力データを検証できます。
フォーム データは、その正確性を検証するために JavaScript を必要とすることがよくあります:
フォーム データが空かどうかを確認しますか?
入力したメールアドレスが正しいか確認してください?
日付が正しく入力されていることを確認しますか?
フォーム入力內(nèi)容が數(shù)値かどうかを確認しますか?
必須（または必須）項目
次の関數(shù)は、ユーザーがフォームに必須（または必須）項目を入力したかどうかを確認するために使用されます。必須または必須フィールドが空の場合、警告ボックスがポップアップ表示され、関數(shù)の戻り値は false になります。それ以外の場合、関數(shù)の戻り値は true (データに問題がないことを意味します):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</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="" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>を?qū)g行します。プログラムを?qū)g行して試してみてください
電子メールの検証
以下の関數(shù)は、入力されたデータが電子メール アドレスの基本構(gòu)文に準拠しているかどうかをチェックします。
これは、入力データには @ 記號とピリオド (.) が含まれている必要があることを意味します。同時に、@ をメール アドレスの最初の文字にすることはできず、@ の後に少なくとも 1 つのピリオドが必要です:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</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="" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>プログラムを?qū)g行して試してください
