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

<!--ログインフォームエリア-->
  <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' }
   ]
  }
  }
 }
 }
</スクリプト>

<テンプレート>
  <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;
  }
</スタイル>