jsはフォーム検証機能を実装します

jsはフォーム検証機能を実装します

この記事の例では、フォーム検証機能を実装するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • フォーム検証からのJavaScript戦略モードの使用の詳細な説明
  • Vue.js + Nuxt.js プロジェクトで Vee-validate フォーム検証を使用する
  • 登録ページのフォーム検証を完了する JavaScript の例
  • フォーム検証に JavaScript を使用する
  • Angularjs の指示を使用してフォーム検証を行う方法
  • AngularJs フォーム検証関数のサンプルコード
  • AngularJS 入門チュートリアル: フォーム検証の使用例
  • Vue.js フォーム検証プラグイン

<<:  Linux 上でプロジェクトをリリースするために Tomcat を展開するプロセスにおけるさまざまな問題と解決策

>>:  複数の値を返す MySQL ストアド プロシージャ メソッドの例

推薦する

MYSQLパターンマッチングREGEXPの使用に関する一般的な話など

のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...

MySQL インデックスクエリ最適化スキルを習得するための記事

序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...

シンプルな CSS テキストアニメーション効果

成果を達成する 実装コードhtml <div id=コンテナ> いらっしゃいませ <...

Node.jsはブレークポイント再開を実装する

目次ソリューション分析スライス履歴書のダウンロード具体的な解決プロセス論理的分析フロントエンドサーバ...

WeChatアプレットは日付と時刻に基づいた並べ替え機能を実装

最近、小さなプログラム プロジェクトを引き継いだのですが、リストを日付と時刻で並べ替えるという要件が...

WebプロジェクトをIdeaにインポートし、Tomcatに公開する問題を解決します

Idea は既存の Web プロジェクトをインポートして Tomcat に公開しますが、Tomcat...

JDKネイティブスレッドプールのバグを修正するTomcatの実装原理

処理能力と同時実行性を向上させるために、Web コンテナは通常、リクエストを処理するタスクをスレッド...

JavaScript を使用して文字列内の最も繰り返しの多い文字を取得する方法

目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...

VueのID認証管理とテナント管理の詳細な説明

目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...

MySQL データベースの一般的な基本操作の分析 [データベースの作成、表示、変更、削除]

この記事では、例を使用して、MySQL データベースの一般的な基本操作について説明します。ご参考まで...

jsは双方向データバインディング(アクセサ監視)を実現します

この記事の例では、双方向データバインディングを実現するためのjsの具体的なコードを参考までに共有して...

docker イメージのプル速度が遅い問題の解決策

現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...

vue-cropper コンポーネントは画像の切り取りとアップロードを実現します

この記事では、画像の切り取りとアップロードを実装するためのvue-cropperコンポーネントの具体...

MySQL InnoDB の重要なコンポーネントの概要

Innodbには以下のコンポーネントが含まれています1. innodb_buffer_pool:これ...

Navicat を MySQL に接続するときに発生する 2059 エラーの解決方法

最近、Djangoを学習しているときにデータベースを使用する必要があったため、MySQLで使用するた...