JavaScript フォームの検証
JavaScript フォームの検証
JavaScript を使用すると、データがサーバーに送信される前に、HTML フォーム内のこれらの入力データを検証できます。
フォーム データは、その正確性を検証するために JavaScript を必要とすることがよくあります:
フォーム データが空かどうかを確認しますか?
入力したメールアドレスが正しいことを確認しますか?
日付が正しく入力されているか確認してください?
フォーム入力内容が数値かどうかを確認しますか?
必須(または必須)項目
次の関数は、ユーザーがフォームに必須(または必須)項目を入力したかどうかを確認するために使用されます。必須フィールドまたは必須フィールドが空の場合、警告ボックスがポップアップ表示され、関数の戻り値は false になります。それ以外の場合、関数の戻り値は true (データに問題がないことを意味します) になります。 validateForm()
{ var x =document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("姓は次のとおりですfully in");
return false;
}
}
上記の関数は、フォームが送信されるときに呼び出されます:
<!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>
次の関数は、入力されたデータが電子メールアドレスの基本的な構文。
これは、入力データには @ 記号とピリオド (.) が含まれている必要があることを意味します。同時に、@ を電子メール アドレスの最初の文字にすることはできず、@ の後に少なくとも 1 つのピリオドが必要です:
function validateForm(){
var x=document.forms["myForm"]["email" ].value; var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos
alert("有効な電子メール アドレスではありません");
return false;
}
}
完全なコードと 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>