JavaScriptを使用したクライアントサイドのフォーム検証
JavaScriptによるクライアントサイドフォーム検証
この記事の目的は、JavaScriptでフォームのバリデーションを行う方法を学ぶことです。学習の目的のために、HTML、CSS、JavaScriptを使用して従業員のレコード管理ウェブサイトのフォームを設計しました。すべてのフォームバリデーションロジックはJavaScriptで開発されています。
以下はプロジェクトデモです：
- 「2023年の最高のAIアバタージェネレーター10選」
- 「スクラッチからのPythonにおける最急降下法とニュートン法：比較」
- 「MMDetectionを使用して物体検出モデルのトレーニング方法を学びましょう」
プロジェクトの開発は3つのステップに分かれています：
- HTMLの作成
- CSSの追加
- JavaScriptの記述
フォームのデザインのためにHTMLを記述する
<!--ファイル名 validations.html--><html> <head> </head><body> <br> <h2>従業員レコード管理システム</h2> <div class=”container”> <form id=”form” onsubmit=”validation()”> <div class=”title”><b>値を入力してください</b></div> <! — 名前入力 → <div> <label for=”fname”>名前</label> <input type=”text” name=”fname” id=”fname” placeholder=”Vivek”/> <p id=”err1"></p> </div> <! — 姓入力 → <div> <label for=”lname”>姓</label> <input type=”text” name=”lname” id=”lname” placeholder=”Chaudhary”/><p id=”err2"></p> </div> <! — 従業員ID入力 → <div> <label for=”eid”>従業員ID</label> <input type=”text” name=”eid” id=”eid” placeholder=”1234"/> <p id=”err3"></p> </div> <! — メール入力 → <div> <label for=”email”>メール</label> <input type=”email” name=”email” id=”email” placeholder=”[email protected]”/> <p id=”err4"></p> </div> <! — 部署入力 → <div> <label for=”did”>部署番号</label> <input type=”text” name=”did” id=”did” placeholder=”10"/> <p id=”err5"></p> </div> <br><br> <button id=”btn” type=”submit”>送信</button> </form> </div></body></html>この時点でのフォームの外観は次のようになります：
HTMLの作業は完了しました。
フォームにCSSを追加してスタイルを設定する
CSSを使用すると、フォームにスタイルと効果を追加して、より魅力的にすることができます。
<style> * { margin: .5; padding: .5; box-sizing: border-box;}body { font-family: sans-serif;}form { display: flex; flex-direction: column; justify-content: center; max-width: 400px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); padding: 50px;}input[type=”text”],input[type=”email”]{ width: 100%; border: 1px solid #333; box-sizing: border-box}label { display: block; margin-bottom: 5px;}input:invalid{ box-shadow:0 0 5px 1px red;}input:focus { border: 2px solid #f2796e;}form div input { width: 100%; height: 40px; border-radius: 8px; outline: none; border: 2px solid #c4c4c4; padding: 0 30px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);}form div { position: relative; margin-bottom: 15px;}input:focus { border: 2px solid #f2796e;}button { margin-top: 15px; width: 100%; height: 45px; background-color: #6e98f2; border: 2px solid #6e98f2; border-radius: 8px; color: #fff; font-size: 20px; cursor: pointer; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.1s ease;}.success-icon,.failure-icon { right: 0.5; opacity: 0.5;}button:hover { opacity: 0.7;}</style>HTMLオブジェクトにCSSコンポーネントを追加した後、このようにフォームが見えます。
スタイリングが完了しました。
バリデーションのためのJavaScriptを追加してください。
JavaScriptを使用すると、DOM (Data Object Model) の要素にアクセスして変更することができます。JavaScriptをより理解しやすくするために、複数のパーツに分割しています。
要素のIDを使用してHTML DOM要素にアクセスする:
let fname=document.getElementById(“fname”);let lname=document.getElementById(“lname”);let eid=document.getElementById(“eid”);let email=document.getElementById(“email”);let did=document.getElementById(“did”);let form=document.getElementById(“form”)let err1=document.getElementById(“err1”)let err2=document.getElementById(“err2”)let err3=document.getElementById(“err3”)let err4=document.getElementById(“err4”)let err5=document.getElementById(“err5”)let successIcon = document.getElementsByClassName(“success-icon”)let failureIcon = document.getElementsByClassName(“failure-icon”)let deptno=[10,20,30,40,50]let btn=document.getElementById("btn").typegetElementById()メソッドは、HTML DOMで最も一般的に使用されるメソッドの1つです。HTML要素にアクセスしたり変更したりするために使用されます。
getElementByClassName()メソッドは、指定されたクラス名を持つ要素のコレクションを返します。
フォームコンポーネントにアクセスし、その動作を変更するために両方のメソッドを使用しています。
フォームコンポーネントのバリデーションのための正規表現を定義する
// 名前のバリデーションのためのJavaScript正規表現var rName = /^[A-Za-z]+$/;// 社員IDのバリデーションのためのJavaScript正規表現var rEmpID=/\d{4}$/; //メールアドレスのバリデーションのためのJavaScript正規表現var rEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; //部署番号のバリデーションのためのJavaScript正規表現var rDeptno = /^\d{2}$/;バリデーションのための関数を定義する
//ファイル名はvalidation.jsですfunction validation() { //名前のバリデーション if (fname.value==”” || !fname.value.match(rName)){ err1.innerHTML=”*名前は空白にできず、文字でなければなりません”; fname.style.border = “2px solid red”; } else { err1.innerHTML=””; fname.style.border = “2px solid green”; } //姓のバリデーション if (lname.value==”” || !lname.value.match(rName)){ err2.innerHTML=”*姓は空白にできず、文字でなければなりません”; lname.style.border = “2px solid red”; } else { err2.innerHTML=””; lname.style.border = “2px solid green”; } //メールアドレスのバリデーション console.log(“メールアドレスは ”,email.value) if (email.value==”” && !rEmail.test(email.value)){ console.log(“メールアドレスのifの中に入りました”) err4.innerHTML=”*メールアドレスは空でなく、有効でなければなりません。ルールに従ってください”; email.style.border = “2px solid red”; } else { err4.innerHTML=””; email.style.border = “2px solid green”; } //社員IDのバリデーション if (eid.value==”” || !rEmpID.test(eid.value)){ err3.innerHTML=”*2文字で始まり、6桁の数字を持つ有効な社員IDを入力してください”; eid.style.border = “2px solid red”; } else { err3.innerHTML=””; eid.style.border = “2px solid green”; } //部署番号のバリデーション dept=Number(did.value) console.log(‘部署番号の値 ‘,dept +” “+typeof(dept)) if (dept==”” || !rDeptno.test(dept)){ console.log(‘ifの中に入りました’) err5.innerHTML=”*部署番号は空白や非数値にできません。もう一度確認してください”; did.style.border = “2px solid red”; } else if(!dept==”” && !deptno.includes(dept)) { console.log(“入力された部署番号の値 ”, did.value + “ “+typeof(did.value)) err5.innerHTML=”*部署番号は値[10,20,30,40]のいずれかである必要があります。もう一度確認してください”; did.style.border = “2px solid red”; } else if(!dept==”” && deptno.includes(dept)){ console.log(‘2番目のelifの中に入りました’) err5.innerHTML=””; did.style.border = “2px solid green”; }}form.addEventListener(btn,(event)=>{ event.preventDefault()});バリデーション
- FirstName
let fname = document.getElementById("fname");let err1 = document.getElementById("err1");// 名前のバリデーションのためのJavaScriptの正規表現var rName = /^[A-Za-z]+$/;// FirstNameのバリデーション if (fname.value == "" || !fname.value.match(rName)){ err1.innerHTML = "*名前は空白であってはならず、文字で入力してください"; fname.style.border = "2px solid red"; } else { err1.innerHTML = ""; fname.style.border = "2px solid green"; }- フォームのテキストタイプの入力項目であるFirstNameにアクセスするためにdocument.getElementById(“fname”)を使用し、エラータグにもdocument.getElementById(“err1”)を使用します
- FirstNameの正規表現をrName = /^[A-Za-z]+$/で定義します
- 次に、if-elseブロックがあります。ここでは、フォームのアクションを取るために比較が行われます。ユーザーが入力したFirstNameがnullであるか、正規表現の基準を満たさない場合、テキストフィールドはエラーメッセージとともに赤く表示されます。
- ユーザーが入力したFirstNameがポリシーを満たす場合、以下のような結果が得られ、テキストフィールドは緑色で表示されます。
LastNameのバリデーションロジックはFirstNameと同じです。
2. Email
let email = document.getElementById("email");let err4 = document.getElementById("err4");// EmailのバリデーションのためのJavaScriptの正規表現var rEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;// Emailのバリデーション if (email.value == "" && !rEmail.test(email.value)){ err4.innerHTML = "*EmailIDは非空であり、有効である必要があります。ルールに従ってください。"; email.style.border = "2px solid red"; } else { err4.innerHTML = ""; email.style.border = "2px solid green"; }- フォームのテキストタイプの入力項目であるEmailにアクセスするためにdocument.getElementById(“email”)を使用し、エラータグにもdocument.getElementById(“err4”)を使用します
- EmailIDがユーザーによってNullで入力されたか、正規表現の基準を満たさない場合、テキストフィールドはエラーメッセージとともに赤く表示されます。
- テキスト入力フィールドをメールタイプとして定義しているため、「@」記号が必要です。そうでない場合は以下のようなエラーが発生します：
- ユーザーが入力したメールがポリシーを満たす場合、以下のような結果が得られ、テキストフィールドは緑色で表示されます。
3. DeptNo
let did = document.getElementById("did");let err5 = document.getElementById("err5")//部署の値のリストlet deptno = [10, 20, 30, 40, 50]//部署番号のバリデーション dept = Number(did.value) if (dept == "" || !rDeptno.test(dept)){ console.log('inside if') err5.innerHTML = "*DeptNoは空白または数字であってはなりません。再度確認してください"; did.style.border = "2px solid red"; } else if (!dept == "" && !deptno.includes(dept)) { err5.innerHTML = "*DeptNoは[10,20,30,40]の値のリストから選んでください。再度確認してください"; did.style.border = "2px solid red"; } else if (!dept == "" && deptno.includes(dept)){ err5.innerHTML = ""; did.style.border = "2px solid green"; }- メールのテキストタイプのフォーム入力アイテムにアクセスするには、document.getElementById(“did”)を使用します。エラータグにもdocument.getElementById(“err5”)を使用します。
- ユーザーが入力した値がif条件を満たさない場合、エラーが発生し、テキストフィールドが赤くマークされます。
- ユーザーが入力した値がelse if条件を満たさない場合、エラーが発生し、テキストフィールドが赤くマークされます。
- ユーザーが入力した値がelse if条件を満たす場合、テキストフィールドは緑でマークされます。
これで、JavaScriptで書かれたフォームバリデーションロジックは以上です。
ユーザーが入力したすべての入力が間違っている場合の結果：
ユーザーが入力したすべての入力が正しい場合の結果：
この記事の範囲はクライアントサイドのバリデーションに関連しています。
サマリー：
- プロジェクトフォームを定義するためにHTMLを書く。
- HTMLフォーム要素にスタイルを追加するためにCSSを使用する。
- クライアントサイドでフォームのバリデーションを処理するためにJavaScriptを使用する。
We will continue to update VoAGI; if you have any questions or suggestions, please contact us!
Was this article helpful?
93 out of 132 found this helpful
Related articles
