Vue はフォームデータ検証のサンプルコードを実装します

Vue はフォームデータ検証のサンプルコードを実装します
  • el-form フォームにルールを追加します。
  • データにルールを定義する
  • 定義されたルールをel-form-itemにバインドする

コードは次のとおりです。

<!--ログインフォームエリア-->
  <el-form :model="ログインフォーム" label-width="0px" class="ログインフォーム" :rules="ログインフォームルール">
  <!--ユーザー名-->
   <el-form-item prop="ユーザー名">
    <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
  </el-form-item>
  <!--パスワード-->
  <el-form-item prop="パスワード">
    <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
  </el-form-item>
  <!--ボタンエリア-->
  <el-form-item class="btns">
    <el-button type="primary">ログイン</el-button>
    <el-button type="info">リセット</el-button>
  </el-form-item>
  </el-form>
<スクリプト>
 エクスポートデフォルト{
 データ(){
  戻る {
  //ログインフォームデータバインディングオブジェクト loginForm:{
   ユーザー名:''、
   パスワード:''
  },
  //フォーム検証ルール loginFormRules:{
   //ユーザー名が正当なユーザー名であるかどうかを確認します:[
   { 必須: true、メッセージ: 'ユーザー名を入力してください'、トリガー: 'blur' },
   { 最小: 3、最大: 10、メッセージ: '長さは 3 文字から 10 文字の間です'、トリガー: 'blur' }
   ]、
   //パスワードが正しいかどうかを確認します。パスワード:[
   { 必須: true、メッセージ: 'パスワードを入力してください'、トリガー: 'blur' },
   { 最小: 6、最大: 15、メッセージ: '長さは 6 文字から 15 文字の間です'、トリガー: 'blur' }
   ]
  }
  }
 }
 }
</スクリプト>

PS: Vueカスタムディレクティブ入力フォームのデータ検証コードを見てみましょう

1. コード

<テンプレート>
  <div class="チェック" >
    <h3>{{メッセージ}}</h3>
    <div class="input">
      <input type="text" v-input v-focus><span>{{msg1}}</span>
    </div>
    <div class="input">
      <input type="text" v-input v-required><span>{{msg2}}</span>
    </div>
    <div class="input">
      <!-- required: true/false は必須フィールドであることを意味します -->
      <input type="text" v-input v-checked="{required:true,}"><span>{{msg3}}</span>
    </div>
    <div class="input">
      <!-- <input type="text" v-input v-validate="'必須|メールアドレス|電話番号|最小(5)|最大(15)|最小長さ(6)|最大長さ(12)|正規表現(/^[0-9]*$/)'">
      required 必須フィールドかどうかを確認します email メールアドレスかどうかを確認します phone 電話番号かどうかを確認します min(5) 最小値を確認します max(3) 最大値を確認します minlength(6) 最小長を確認します maxlength(12) 最大長を確認します regex(/^[0-9]*$/) 正規表現検証を実行します -->
      <input type="text" v-input
          v-validate="'必須|最小(5)|最大(15)|最小長さ(6)|最大長さ(12)|正規表現(/^[0-9]*$/)'" placeholder="複数選択の検証">
    </div>
    <div class="input">
      <!--
      確認には数字を使用する必要があります: /^[0-9]*$/
      26 文字の英語の文字列を検証します: /^[A-Za-z]+$/
      携帯電話番号を確認してください: /^[1][3,4,5,7,8][0-9]{9}$/;
      メールアドレスを確認してください: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      -->
      <input type="text" v-input v-validate="'required|phone'" placeholder="電話番号を確認">
    </div>
    <div class="input">
      <input type="text" v-input v-validate="'required|email'" placeholder="メールアドレスを確認">
    </div>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: 'チェック',
    データ() {
      戻る {
        メッセージ: 'コマンド',
        tipsBorderColor: '赤'、
        メッセージ1: 「最も簡単な指示」
        メッセージ2: '検証は空の指示にはできません'、
        メッセージ3: 「定期的な検証を実行する」
        ヒントメッセージ: '',
      }
    },

    ディレクティブ: {
      // 入力ボックスのコマンド入力を変更します: {
        // バインドされた要素がDOMに挿入されると、挿入されます: function (el) {
          el.style.width = "300px";
          el.style.height = "35px";
          el.style.lineHeight = "35px";
          el.style.background = "#ddd";
          el.style.fontSize = "16px";
          el.style.border = "1px実線 #eee";
          el.style.textIndent = "5px";
          el.style.textIndent = "8px";
          el.style.borderRadius = "5px";
        }
      },
      // 入力ボックスのデフォルトで選択されたコマンド focus: {
        挿入: 関数 (el) {
          el.focus();
        }
      },
      // 空にできない命令が必要です: {
        挿入: 関数 (el) {
          el.addEventListener('blur', 関数() {
            el.value == '' || el.value == null の場合 {
              el.style.border = "1px 赤一色";
              console.log('空にすることはできません');
            }

          })
        }
      },
      // コマンドがチェックされていることを確認します: {
        挿入: 関数 (el) {
          エルを返す
        }
      },
      // 検証: {
        挿入: 関数 (el, validateStr) {
          // 検証ルールを検証配列に分割します。let validateRuleArr = validateStr.value.split("|");
          // フォーカスの喪失をリッスンする el.addEventListener('blur', function () {
            // フォーカスを失ってcheckedfun()を検証します。
          });

          //ループ検証関数checkedfun() {
            (var i = 0; i < validRuleArr.length; ++i) の場合 {
              let requiredRegex = /^required$/; // required が設定されているかどうかを確認します
              let emailRegex = /^email$/; // メールが設定されているかどうかを判定する
              let phoneRegex = /^phone$/; // 電話が設定されているかどうか確認する
              let minRegex = /min\(/; //min 最小値が設定されているかどうかを判断します let maxRegex = /max\(/; //max 最大値が設定されているかどうかを判断します let minlengthRegex = /minlength\(/; //minlength 最大長が設定されているかどうかを判断します let maxlengthRegex = /maxlength\(/; //maxlength 最大長が設定されているかどうかを判断します let regexRegex = /regex\(/;
              // 必須が設定されているかどうかを確認します
              (必須正規表現のテスト(検証ルールArr[i]))の場合{
                (!必須())の場合{
                  壊す;
                } それ以外 {
                  ヒントを削除します。
                }

              }

              // メールが設定されているかどうかを判定する
              if (emailRegex.test(validateRuleArr[i])) {
                if (!email()) {
                  壊す;
                } それ以外 {
                  ヒントを削除します。
                }

              }

              // 電話が設定されているかどうかを判定する
              if (phoneRegex.test(validateRuleArr[i])) {
                if (!phone()) {
                  壊す;
                } それ以外 {
                  ヒントを削除します。
                }

              }

              // 最小値が設定されているかどうかを判定する if (minRegex.test(validateRuleArr[i])) {
                (!eval(validateRuleArr[i]))の場合{
                  壊す;
                } それ以外 {
                  ヒントを削除します。
                }

              }

              // 最大値が設定されているかどうかを判定する if (maxRegex.test(validateRuleArr[i])) {
                (!eval(validateRuleArr[i]))の場合{
                  壊す;
                } それ以外 {
                  ヒントを削除します。
                }

              }

              // 最小長が設定されているかどうかを確認する if (minlengthRegex.test(validateRuleArr[i])) {
                (!eval(validateRuleArr[i]))の場合{
                  壊す;
                } それ以外 {
                  ヒントを削除します。
                }

              }

              // 最大長が設定されているかどうかを確認する if (maxlengthRegex.test(validateRuleArr[i])) {
                (!eval(validateRuleArr[i]))の場合{
                  壊す;
                } それ以外 {
                  ヒントを削除します。
                }

              }

              // テスト正規表現を判断する if (regexRegex.test(validateRuleArr[i])) {
                (!eval(validateRuleArr[i]))の場合{
                  壊す;
                } それ以外 {
                  ヒントを削除します。
                }

              }

            }

          }

          // 必須フィールドかどうかを確認する function required() {
            el.value == '' || el.value == null の場合 {
              // console.log("空にすることはできません");
              tipMsg("空にすることはできません");
              false を返します。
            }

            true を返します。
          }

          // メール関数であるかどうかを確認する email() {
            emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ とします。
            if (!emailRule.test(el.value)) {
              tipMsg("有効なメールアドレスを入力してください");
              false を返します。
            }

            true を返します。
          }

          // 携帯電話番号かどうかを確認する function phone() {
            電話ルールを /^[1][3,4,5,7,8][0-9]{9}$/ とします。
            if (!phoneRule.test(el.value)) {
              tipMsg("有効な携帯電話番号を入力してください");
              false を返します。
            }

            true を返します。
          }

          // 最小値検証関数 min(num) {
            el.value < num の場合
              tipMsg("最小値は " + num より小さくすることはできません);
              //console.log('最小値は '+num より小さくすることはできません);
              false を返します。
            }

            true を返します。
          }

          // 最大値検証関数 max(num) {
            if (el.value > num) {
              tipMsg("最大値は " + num より大きくできません);
              //console.log('最大値は '+num より大きくできません);
              false を返します。
            }

            true を返します。
          }

          // 最小長検証関数 minlength(length) {
            (el.value.length < 長さ)の場合{
              //console.log('最小長は'+長さより小さくすることはできません);
              tipMsg("最小長は" + 長さより小さくすることはできません);
              false を返します。
            }

            true を返します。
          }

          // 検証の最大長 function maxlength(length) {
            (el.value.length > length)の場合{
              //console.log('最大長は '+長さより大きくすることはできません);
              tipMsg("最大長は" + 長さより大きくすることはできません);
              false を返します。
            }
            true を返します。
          }

          // 正規表現を検証する function regex(rules) {
            if (!rules.test(el.value)) {
              tipMsg("正しい形式を入力してください");
              false を返します。
            }
            true を返します。
          }

          // プロンプト情報を追加する function tipMsg(msg) {
            ヒントを削除します。
            tipsDiv = document.createElement('div');
            curDate を Date.parse(new Date()) とします。
            tipsDiv.innerText = msg;
            tipsDiv.className = "tipsDiv";
            tipsDiv.id = curDate;
            tipsDiv.style.position = "絶対";
            tipsDiv.style.top = el.offsetTop + 45 + 'px';
            tipsDiv.style.left = el.offsetLeft + 'px';
            document.body.appendChild(tipsDiv);
            //setTimeout(関数(){
            // document.getElementById(curDate).remove();
            //,2000);
          }

          // ヒントを削除する function removeTips() {
            document.getElementsByClassName('tipsDiv')[0] の場合 {
              ドキュメントの要素をクラス名で取得します('tipsDiv')[0]。削除します。
            }

          }
        },
      }
    }
  }
</スクリプト>

<スタイル>

  .入力{
    パディング下部: 20px;
    フロート: 左;
    クリア: 両方;
    左マージン: 500px;
    表示: ブロック;

  }

  .入力をチェック{
    幅: 300ピクセル;
    高さ: 35px;
    アウトライン: なし;
    背景: #ddd;
  }

  .check span {
    左パディング: 20px;
  }

  .tipsDiv {
    高さ: 27px;
    行の高さ: 25px;
    境界線: 1px 実線 #333;
    背景: #333;
    パディング: 0px 5px;
    境界線の半径: 4px;
    色: #fff;
    フォントサイズ: 16px;
  }

  .tipsDiv:before {
    コンテンツ: '';
    表示: ブロック;
    境界線の幅: 0 5px 8px;
    境界線のスタイル: solid;
    境界線の色: 透明 透明 #000;
    位置: 絶対;
    上: -9px;
    左: 6px;
  }
</スタイル>

要約する

これで、Vue でフォーム データ検証を実装するサンプル コードに関するこの記事は終了です。Vue フォーム データ検証に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueフォームイベントデータバインディングの詳細な説明
  • Vueフォームデータバインディングの詳細な分析
  • Vueフォームコントロールのデータバインディング方法の詳細な説明
  • Vue.js 基本命令例解説(各種データバインディング、フォームレンダリングまとめ)
  • Vueでフォームデータを取得する方法

<<:  MySQL のデータ型とフィールド属性の原理と使用法の詳細な説明

>>:  js の Array.forEach でループを終了する方法の例

推薦する

Vue の計算プロパティとリスナーの使用の概要

1. 計算プロパティとリスナー1.1 計算プロパティ <!DOCTYPE html> &...

Nginx ベースの HTTPS ウェブサイトを設定する手順

目次序文:暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...

Centos7 での DNS サーバーの構築の概要

目次1. プロジェクト環境: 2: DNSサーバーの設定i: 前方解析を構成する: ii: 逆解像度...

MySQL自動シャットダウン問題への対処の実践記録

最近、あるプロジェクトを手伝ったのですが、MySQL マシンがしばらくすると自動的に停止し続けました...

JavaScript の基本演算子

目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...

同じドメイン名を持つ Nginx プロキシのフロントエンドとバックエンドの分離プロジェクトの完全な手順

フロントエンド プロジェクトとバックエンド プロジェクトは分離されており、フロントエンドとバックエン...

Dockerコンテナ終了エラーコードの手順

実行後、一部の Docker コンテナが終了することがあります。原因を調べるには、Docker コン...

mysqlを使用して、URLから返されたhttp GETリクエストデータを記録します。

ビジネスシナリオの要件と実装ロジックの分析ビジネスでは、HTTP GET を使用してデータを要求する...

Svelte の Defer Transition を Vue で実装する方法

最近、Rich Harris の <Rethinking Reactivity> ビデオ...

Linux 上での MySQL データベースのリモート展開の詳細な手順

LinuxリモートMySQLデータベースの展開、参考までに、具体的な内容は次のとおりです。 1.0 ...

HTML の長いテキストは、タグの幅を超えると自動的に切り捨てられます。

長いテキストを表示する場合、C# 側で文字をインターセプトする必要があることがよくありますが、長いテ...

アニメーション効果のようなVueトランジションの例

目次結果を一目で見るハート効果デジタルスクロールアニメーションアニメーションのように結果を一目で見る...

SELinux 入門

カーネル 2.6 の時代には、アクセス制御セキュリティ ポリシーのメカニズムを提供するために新しいセ...

Linux で文字化けしたファイルや特殊文字のファイルを削除する方法

エンコーディングの理由により、Linux サーバーに中国語のファイルやディレクトリをアップロードまた...