English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTMLフォームの検証はJavaScriptで実行できます。
HTMLフォームは、名前、メールアドレス、場所、年齢などのユーザー情報を収集するために通常使用されます。
しかし、お客様が期待するデータを入力しないユーザーがいる可能性が高いです。
サーバー資源に不必要な負荷を避けるために、クライアント（ユーザーシステム）上でJavaScriptを使用してフォームデータを検証することができます。
入力をWebサーバーに送信する前に、Webブラウザによって実行されますクライアントサイドバリデーション。
入力がサーバーに送信された後、サーバーサイドバリデーションWebサーバーによって実行されます。
<div class="wrapper">
<h2>アカウントを作成</h2>
<label for="username"><b>名前</b></label>
<input type="text" placeholder="ユーザー名を入力" name="uname" id="username" required>
<label for="useremail"><b>Email</b></label>
<input type="email" placeholder="Emailを入力" name="uemail" id="useremail" required>
<label for="userpwd1><b>パスワード</b></label>
<input type="password" placeholder="パスワードを入力" name="psw" id="userpwd1" required>
<input type="password" placeholder="パスワードの確認" name="cpsw" id="userpwd2" required>
<p style="margin-top: 10px;">
<input type="radio" name="gender" id="female" value="female" checked><label for="female">女性</label>
<input type="radio" name="gender" id="male" value="male"><label for="male">男性</label>
</p>
<button type="submit">登録</button>
</div>
<div class="footer">
<div>既存のアカウントがありますか？ <a href="#">ログイン</a></div>
</div>
</form>
<script>
function validateForm() {
let name = document.getElementById("username").value;
let email = document.getElementById("useremail").value;
let pswd}}1 = document.getElementById("userpwd1").value;
let pswd}}2 = document.getElementById("userpwd2").value;
if(name == "") {
alert("Name must be filled out");
return false;
}
if(email == "") {
alert("メールアドレスを必須にします");
return false;
}
if(pswd1 !== "" || pswd2 !== "") {
if(pswd1 !== pswd2) {
alert("Password didn't match");
return false;
}
} else {
alert("パスワードは必須です");
return false;
}
return true;
}
</script>テストしてみてください：/›典型的な検証タスクは：
ユーザーがすべての必須フィールドを入力しましたか？
ユーザーが有効なデータを入力しましたか？
このコードでは、入力フィールド（ユーザー名）が空の場合、この関数は警告メッセージを表示しfalseを返し、フォームの提出を防ぎます：
function validateForm() {
let x = document.getElementById("uname").value;
if (x == "") {
alert("名前は必須です");
return false;
}
}フォームを提出する際にこの関数を呼び出すことができます：
<form action="form-action.html" onsubmit="return validateForm()" method="POST"> <label for="uname">Name:</label> <input type="text" name="username" id="uname"> <input type="submit" value="Submit"> </form>テストをしてみて‹/›
JavaScriptは通常数字の入力を検証に使用されます。
入力してください1まで10の間の数字：
JavaScriptは通常メールアドレスの検証に使用されます。
有効なメールアドレスを入力してください：
JavaScriptは通常パスワードの確認に使用されます。
HTMLフォームの検証に使用できます必須属性自動実行：
<input type="text" name="demo" required>テストをしてみて‹/›
您可以使用javascript 在<input type="password">和<input type="text">之间进行切换。
パスワードフィールドに値を入力し、「パスワードを表示」ボタンをクリックしてください：
HTML5以下の新しいHTML属性が導入されました：
| 属性 | 説明 |
|---|---|
| disabled | 入力要素を無効にする |
| max | 入力要素の最大値を指定 |
| min | 入力要素の最小値を指定 |
| pattern | 入力要素の値パターンを指定 |
| required | 入力フィールドに要素が必要 |
CSS3以下の新しいCSSパシオセレクタが導入されました：
| セレクタ | 説明 |
|---|---|
| :disabled | 「無効」属性を指定した入力要素を選択 |
| :invalid | 無効な値を持つ入力要素を選択 |
| :valid | 有効な値を持つ入力要素を選択 |
| :optional | 「必須」属性を指定していない入力要素を選択 |
| :required | 「必須」属性を指定した入力要素を選択 |
注意：クライアントのバリデーションはサーバーのバリデーションを代わりにすることはできません。ユーザーがフォームデータを確認したとしても、ユーザーはブラウザでJavaScriptを無効にすることができるため、常にサーバー側でフォームデータを確認する必要があります。