JavaScript フォームの検証


JavaScript を使用すると、データがサーバーに送信される前に、HTML フォーム内のこれらの入力データを検証できます。

フォーム データは、その正確性を検証するために JavaScript の使用を必要とすることがよくあります:


  • フォーム データが空かどうかを確認しますか?


  • 入力したメールアドレスが正しいか確認してください?


  • 日付が正しく入力されていることを確認しますか?


  • フォーム入力内容が数値かどうかを確認しますか?


必須（または必須）項目

次の関数は、ユーザーがフォームに必須（または必須）項目を入力したかどうかを確認するために使用されます。必須であるか、必須フィールドが空の場合、警告ボックスが表示され、関数の戻り値は false になります。それ以外の場合、関数の戻り値は true (データに問題がないことを意味します) になります。 

function validateForm()
{
	var x=document.forms["myForm"]["fname"].value;
	if (x==null || x=="")
	{
		alert("姓必须填写");
		return false;
	}
}

上記の関数は、フォームが送信されると呼び出されます。呼び出し:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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="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<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
		return false;
	}
}

以下は、HTML フォームを含む完全なコードです:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
	
</body>
</html>

実行例»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します