この記事の例では、フォーム検証機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 1. 使用される 3 つのイベント: onfocus (フォーカス イベント)、onblur (フォーカス離脱イベント)、onkeyup (キー アップ イベント) 2. イベントを使用して関数をトリガーし、関数内の検証情報を実行します。 3. チェックフォームを使用して、フォームの内容が標準化されているかどうかを判断します。標準化されている場合は、送信ボタンでフォーム情報を送信できます。 単純な効果: 次の形式のコード: <form action="demo.html" onsubmit="checkForm() を返す"> <div> <div class="text"> <p>ユーザー名</p> <input id="value" onfocus="shoeTips('hint','ユーザー名の長さは 6 未満にできません')" onblur="hint_hide()" onkeyup="hint()" type="text" Name="Userame" placeholder="ユーザー名" /> <span id="ヒント"></span> </div> <div class="text"> <p>パスワード</p> <input id="pass_value" onfocus="shoeTips('pass_hint','パスワードの長さは 6 未満にできません')" onblur="pass_hide()" onkeyup="checkPass()" type="password" name="password" placeholder="password" /> <span id="pass_hint"></span> </div> <div class="text"> <p>パスワードの確認</p> <input id="passpass_value" onfocus="shoeTips('passpass_hint','2 つのパスワードは一致している必要があります')" onblur="passpass_hide()" onkeyup="checkPassPass()" type="password" name="password" placeholder="パスワードの確認" /> <span id="passpass_hint"></span> </div> <div class="text"> <p>メール</p> <input id="email" onfocus="shoeTips('email_hint','メールの形式は正しい必要があります')" onblur="emailHide()" onkeyup="emailCheck()" type="email" name="email" placeholder="Email" /> <span id="email_hint"></span> </div> <div class="text"> <p>携帯電話番号</p> <input id="phone" type="text" onfocus="shoeTips('phone_hint','11桁の電話番号')" onblur="phoneHide()" onkeyup="phoneCheck()" Name="Phone" placeholder="電話番号"> <span id="phone_hint"></span> </div> <div class="送信"> <input type="submit" value="送信" /> </div> </div> </フォーム> js の場合: 関数 shoeTips(spanId, tips) { var span = document.getElementById(spanId); span.innerHTML = ヒント; } /** * ユーザー名を確認 */ 関数ヒント() { var 値 = document.getElementById("値").value; var ヒント = document.getElementById("ヒント"); 値の長さが6未満の場合 hint.innerHTML = "ユーザー名が短すぎます"; false を返します。 } それ以外 { hint.innerHTML = "修飾ユーザー名"; true を返します。 } } 関数hint_hide() { var ヒント = document.getElementById("ヒント"); ヒント.innerHTML = ""; } /** * パスワードを確認してください */ 関数 checkPass() { var value = document.getElementById("pass_value").value; var ヒント = document.getElementById("pass_hint"); 値の長さが6未満の場合 hint.innerHTML = "パスワードが短すぎます"; false を返します。 } それ以外 { hint.innerHTML = "パスワードの形式は適切です"; true を返します。 } } 関数 pass_hide() { var ヒント = document.getElementById("pass_hint"); ヒント.innerHTML = ""; } /*** * パスワードの確認 */ 関数 checkPassPass() { var papavalue = document.getElementById("passpass_value").value; var value = document.getElementById("pass_value").value; var papahint = document.getElementById("passpass_hint"); if(papavalue != value) { papahint.innerHTML = "2つのパスワードが一致しません"; false を返します。 } それ以外 { papahint.innerHTML = ""; true を返します。 } } 関数passpass_hide() { var papahint = document.getElementById("passpass_hint"); papahint.innerHTML = ""; } /** * メールアドレスを確認 */ 関数 checkEmail(strEmail) { var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if ( emailReg.test(strEmail) ) { true を返します。 } それ以外 { // alert("入力したメールアドレスの形式が正しくありません!"); false を返します。 } }; 関数emailCheck() { var emailValue = document.getElementById("email").value; var email_hint = document.getElementById("email_hint"); var flag = checkEmail(emailValue); if(フラグ) { email_hint.innerHTML = "メールの形式は正しいです"; true を返します。 } それ以外 { email_hint.innerHTML = "メール形式エラー"; false を返します。 } } 関数 emailHide() { var email_hint = document.getElementById("email_hint"); email_hint.innerHTML = ""; } /** * 携帯電話番号を確認してください */ 関数 checkMobile( strMobile ) { //13588888888 var regu = /^[1][345678][0-9]{9}$/; var re = new RegExp(regu); if (re.test(strMobile)) { true を返します。 } それ以外 { false を返します。 } }; 関数phoneCheck() { var 電話 = document.getElementById("電話").value; var phone_hint = document.getElementById("phone_hint"); var flag = checkMobile(電話); if(フラグ) { phone_hint.innerHTML = "電話番号の形式は正しいです"; true を返します。 } それ以外 { phone_hint.innerHTML = "電話番号の形式が正しくありません"; false を返します。 } } 関数phoneHide() { var phone_hint = document.getElementById("phone_hint"); 電話ヒント.innerHTML = ""; } 関数 checkForm() { var flag = emailCheck() && checkPass() && checkPassPass() && hint() && phoneCheck(); フラグを返します。 } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux 上でプロジェクトをリリースするために Tomcat を展開するプロセスにおけるさまざまな問題と解決策
>>: 複数の値を返す MySQL ストアド プロシージャ メソッドの例
目次1. jsメモリ2. 譲渡3. 浅いコピー4. ディープコピー序文:以下の記事を読む前に、記憶に...
目次Vue ミックスインの使用ミックスインでのデータアクセスミックスイン/index.jsホーム.v...
目次1. まずプロジェクトにechartsをインストールします2. echartsに縦棒グラフテンプ...
MySQL データベースでは、テーブルが互いに関連付けられた後は、それらを任意に削除することはできま...
この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介...
この記事では、Spring boot + Maven プロジェクトのデプロイメントを例に、Code ...
SQL ページング クエリ:背景会社のシステムには、構成管理用のプラットフォーム、いわゆる CRUD...
1. CSS の概念: (カスケーディング スタイル シート)利点: 1. コンテンツとプレゼンテ...
序文MySQL は、2016 年もデータベースの人気において力強い成長傾向を維持し続けました。 My...
ヒント:配列変更メソッドによりv-forが更新され、ページが更新されます。配列を変更しないメソッド:...
原則: まず入力要素を非表示にし、次に CSS を使用してラベル要素のスタイルを設定します (他の要...
目次1. プロセスとスレッドの概念2. プロセス管理とは何ですか? 3. プロセス管理の役割4. L...
目次1. ハッシュテーブルの原理2. ハッシュテーブルの概念3. ハッシュ競合問題1. チェーンアド...
リストは、テーブルをコンテナーとして使用するテキストまたはグラフの形式として定義されます。商品の種類...
目次1. 指令とは何ですか? Vue でよく使われる組み込みの v ディレクティブv-if と v-...