JavaScript フォームの検証

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

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

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

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

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

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

JavaScript フォームの検証

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

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

フォームデータが空かどうかを確認(rèn)しますか?

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

日付が正しく入力されているか確認(rèn)してください?

フォーム入力內(nèi)容が數(shù)値かどうかを確認(rèn)しますか?

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

関數(shù)CheckForm()

{

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

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

中國(guó)語(yǔ)/英語(yǔ)/數(shù)字/メールアドレスの合法性判斷:

學(xué)び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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 = "密碼長(zhǎng)度必須大于或者等于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 = '姓名中不能包含數(shù)字'; $("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="注冊(cè)" /> </div> </form> </body> </html>

提出するリセットコード

自動(dòng)運(yùn)転