JavaScript フォームの検証

フォームの入力ボックスやドロップダウンボックスなどはユーザー入力を受け付けることができるため、JavaScriptを使用してフォームを操作することでユーザーが入力した内容を取得したり、入力ボックスに新たな内容を設定したりすることができます。

HTML フォームの入力コントロールには主に次のタイプがあります:

テキストボックス、対応する <input type="text">、、テキストの入力に使用されます

ラジオボタン、対応する < ;input ;type="radio">、1 つの項目を選択するために使用されます;

チェックボックス、対応する <input type="checkbox">、複数の項目を選択するために使用されます。ボックス (対応する <select>) は、項目を選択するために使用されます。

隠しテキスト (対応する <input type="hidden">>) は、ユーザーには表示されませんが、表示されます。フォームが送信されると、隠しテキストがサーバーに送信されます。

JavaScript フォームの検証

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

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

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

入力したメールアドレスが正しいことを確認しますか?

日付が正しく入力されているか確認してください?

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

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

関数CheckForm()

{

if (document.form.name.value.length == 0) {

alert("名前を入力してください!");document.form.name.focus();
return false;
}
return true;
}

中国語/英語/数字/メールアドレスの合法性判断:

次のセクション

新しいファイル

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
 <script type="text/javascript"> 
 
	 function $(id) { 
		 return document.getElementById(id); 
	 } 
		 
	 function check() { 
		 var email = $("email").value; 
		 var password = $("password").value; 
		 var repassword = $("repassword").value; 
		 var name = $("name").value; 
			 
		 $("emailinfo").innerHTML = ""; 
		 $("passwordinfo").innerHTML = ""; 
		 $("repasswordinfo").innerHTML = ""; 
		 $("nameinfo").innerHTML = ""; 
			 
		 if(email == "") { 
			 $("emailinfo").innerHTML = "Email值不能为空"; 
			 $("email").focus(); 
			 return false; 
		 } 
			 
		 if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { 
			 $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; 
			 $("email").focus(); 
			 return false; 
		 } 
			 
		 if(password == "") { 
			 $("passwordinfo").innerHTML = "密码不能为空"; 
			 $("password").focus(); 
			 return false; 
		 } 
			 
		 if(password.length < 6) { 
			 $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; 
			 $("password").focus(); 
			 return false; 
		 } 
			 
		 if(repassword != password) { 
			 $("repasswordinfo").innerHTML = "两次输入的密码不一致"; 
			 $("repassword").focus(); 
			 return false; 
		 } 
			 
		 if(name == "") { 
			 $("nameinfo").innerHTML = "姓名不能为空"; 
			 $("name").focus(); 
			 return false; 
		 } 
			 
		 for(var i = 0; i < name.length; i++) { 
			 var j = name.subString(i , i+1); 
			 if(isNaN(j) == false) { 
				 $("nameinfo").innerHTML = '姓名中不能包含数字'; 
				 $("name").focus(); 
				 return false; 
			 } 
		 } 
	 } 
 </script> 
</head> 
<body> 
 <form name="login_form" method="post" onsubmit="return check()"> 
 <div> 
 Email:<input type="text" name="email" id="email"/><span id="emailinfo"></span> 
 </div> 
	 <br>
 <div> 
 密码:<input type="password" name="password" id="password" /><span id="passwordinfo"></span> 
 </div> 
 <br>	 
 <div> 
 重输密码:<input type="password" name="repassword" id="repassword" /><span id="repasswordinfo"></span> 
 </div> 
	 <br>
 <div> 
 姓名：<input type="text" name="name" id="name" /><span id="nameinfo"></span> 
 </div> 
 <br>	 
 <div> 
 <input type="submit" value="注册" /> 
 </div> 
 </form> 
</body> 
</html>

提出するリセットコード

自動運転

全画面表示