フォームは、名前、電子メール アドレス、電話番号など、ユーザーが送信した情報を収集できる Web アプリケーション (Web サイト) の重要な部分です。ユーザーは、携帯電話番号を入力する際に桁を逃したり、入力内容の前後にスペースを入力したり、メールボックスの形式が正しくないなど、情報を入力する際にいくつかの間違いを犯す可能性があるため.帯域幅を節約し、これらの問題によるサーバーへの不必要な負荷を回避するために、JavaScript を使用してデータを送信する前にチェックし、正しいことを確認してからサーバーに送信することができます。
図: 必須フィールドの検証 
図: データ形式の検証
JavaScript を使用して送信されたデータを検証する (クライアント側の検証) 方が、検証のためにサーバーにデータを送信する (サーバー側の検証) よりも優れています。高速ですが、サーバー側の検証では、最初にデータをサーバーに送信する必要があり、次にサーバーが結果をブラウザーに返します。ユーザーは、サーバーが結果に応答するのを待って、何が問題なのかを知る必要があります。
注: クライアント側の検証は高速ですが、クライアント側の検証はサーバー側の検証に代わるものではありません。開発プロセス中、クライアント側の検証が実行されるかどうかに関係なく、ユーザーが送信したデータはサーバー側で検証される必要があります。これは、ユーザーがブラウザーで JavaScript を無効にできるためです。
コンテンツ
表示
JavaScript を使用したフォームの検証
フォームの検証は通常、次の 2 つの部分で構成されます。
- 必須フィールドの検証: すべての必須フィールドが入力されていることを確認してください。
- データ形式の検証: 入力されたコンテンツのタイプと形式が正しく有効であることを確認します。
必須フィールドの検証
必須フィールドの検証は、ユーザーが登録する際により一般的です. 必須フィールドの検証を通じて、ユーザー名、パスワード、電子メールアドレスなど、フォームのすべての必須フィールドが入力されていることを確認できます.
必須フィールドの検証を実装するのは非常に簡単です. 必要なフォーム要素の値がプログラムで空かどうかをチェックするだけです. サンプルコードは次のとおりです.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
.error{
color: red;
}
label{
display: inline-block;
width: 70px;
text-align: right;
}
</style>
</head>
<body>
<form onsubmit="return validateForm()" action="" method="post">
<fieldset>
<legend>登録:</legend>
<div class="row">
<label>ユーザー名：</label>
<input type="text" name="name">
<span class="error" id="nameErr"></span>
</div>
<div class="row">
<label>パスワード：</label>
<input type="password" name="pwd">
<span class="error" id="pwdErr"></span>
</div>
<div class="row">
<label>Email：</label>
<input type="text" name="email">
<span class="error" id="emailErr"></span>
</div>
<div class="row">
<label>携帯番号：</label>
<input type="text" name="mobile" maxlength="11">
<span class="error" id="mobileErr"></span>
</div>
<div class="row">
<label>確認コード：</label>
<input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span>
<span class="error" id="captchaErr"></span>
</div>
<div class="row">
<input type="submit" value="登録">
</div>
</fieldset>
</form>
<script>
var captcha = getCaptcha(); // 確認コードを生成する
// inputタグをクリアすると、入力エラーのメッセージをクリアする
var tags = document.getElementsByTagName('input');
for (var i = 0; i < tags.length; i++) {
tags[i].onchange = function(){
var idname = this.name + "Err";
document.getElementById(idname).innerHTML = '';
}
}
// エラーメッセージを表示する
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// 入力値を検証する
function validateForm() {
// 入力値を取得する
var name = document.querySelector("input[name='name']").value;
var pwd = document.querySelector("input[name='pwd']").value;
var email = document.querySelector("input[name='email']").value;
var mobile = document.querySelector("input[name='mobile']").value;
var captcha = document.querySelector("input[name='captcha']").value;
if(name == "" || name == null){
printError("nameErr", "ユーザー名は必須です");
return false;
}
if(pwd == "" || pwd == null){
printError("pwdErr", "パスワードは必須です");
return false;
}
if(email == "" || email == null){
printError("emailErr", "メールアドレスは必須です");
return false;
}
if(mobile == "" || mobile == null){
printError("mobileErr", "携帯番号は必須です");
return false;
}
if(captcha == "" || captcha == null){
printError("captchaErr", "確認コードは必須です");
return false;
}
}
// 確認コードを生成する
function getCaptcha(){
var cap = Math.floor(Math.random()*10000).toString();
if(cap.length != 4) cap += "0";
captcha = cap;
document.getElementById("captcha").innerHTML = cap;
}
</script>
</body>
</html> 操作の結果は次のとおりです。
データ形式の検証とは、ユーザーが入力したデータが要件を満たしているかどうかを正規表現で検証することです. メールアドレスを例にとると、正しいメールアドレスには@と.が含まれている必要があり、 @最初の文字であってはなりません.電子メール アドレス.は@ .
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
.error{
color: red;
}
label{
display: inline-block;
width: 70px;
text-align: right;
}
</style>
</head>
<body>
<form onsubmit="return validateForm()" action="" method="post">
<fieldset>
<legend>登録:</legend>
<div class="row">
<label>ユーザー名：</label>
<input type="text" name="name">
<span class="error" id="nameErr"></span>
</div>
<div class="row">
<label>パスワード：</label>
<input type="password" name="pwd">
<span class="error" id="pwdErr"></span>
</div>
<div class="row">
<label>Eメール：</label>
<input type="text" name="email">
<span class="error" id="emailErr"></span>
</div>
<div class="row">
<label>携帯電話番号：</label>
<input type="text" name="mobile" maxlength="11">
<span class="error" id="mobileErr"></span>
</div>
<div class="row">
<label>認証コード：</label>
<input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span>
<span class="error" id="captchaErr"></span>
</div>
<div class="row">
<input type="submit" value="登録">
</div>
</fieldset>
</form>
<script>
var capCode = getCaptcha(); // 認証コードを生成
console.log(capCode);
// inputタグの後ろにあるエラーメッセージをクリアします。
var tags = document.getElementsByTagName('input');
for (var i = 0; i < tags.length; i++) {
tags[i].onchange = function(){
var idname = this.name + "Err";
document.getElementById(idname).innerHTML = '';
}
}
// エラーメッセージを表示します。
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// フォームデータを検証する
function validateForm() {
// フォーム要素の値を取得します。
var name = document.querySelector("input[name='name']").value;
var pwd = document.querySelector("input[name='pwd']").value;
var email = document.querySelector("input[name='email']").value;
var mobile = document.querySelector("input[name='mobile']").value;
var captcha = document.querySelector("input[name='captcha']").value;
if(name == "" || name == null){
printError("nameErr", "ユーザー名を入力してください。");
return false;
}
if(pwd == "" || pwd == null){
printError("pwdErr", "パスワードを入力してください。");
return false;
}
if(email == "" || email == null){
printError("emailErr", "Eメールを入力してください。");
return false;
} else {
var regex = /^\S+@\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "正しいEメールアドレスを入力してください。");
return false;
}
}
if(mobile == "" || mobile == null){
printError("mobileErr", "携帯電話番号を入力してください。");
return false;
} else {
var regex = /^[1]\d{10}$/;
if(regex.test(mobile) === false) {
printError("mobileErr", "正しい携帯電話番号を入力してください。");
return false;
}
}
if(captcha == "" || captcha == null){
printError("captchaErr", "認証コードを入力してください。");
return false;
} else {
console.log(capCode);
console.log(captcha);
if(capCode != captcha){
printError("captchaErr", "認証コードが間違っています。");
return false;
}
}
}
// 認証コードを取得します。
function getCaptcha(){
var cap = Math.floor(Math.random()*10000).toString();
if(cap.length != 4) cap += "0";
document.getElementById("captcha").innerHTML = cap;
return capCode = cap;
}
</script>
</body>
</html> 操作の結果は次のとおりです。
「JS フォームの検証 (例あり)」についてわかりやすく解説！絶対に観るべきベスト2動画
JavaScript を使用してカスタム フォーム バリデーターを作成する方法
html、cssとJSでお問い合わせフォームを解説
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
