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>

提出するリセットコード

自動運転