Vueはルールを使用してフォームフィールドの検証を実装します

<!-- フォーム -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="ユーザー名:" prop="userName">
       <el-input v-model="rulesForm.userName" スタイル="幅:300px" 最大長さ="50"/>
    </el-form-item>
</el-form>

データ（） {
    戻る {
        //他のデータ定義を省略します...
        
        // フォーム検証 formRules: {
            ユーザー名: [
                {required: true、message: "ユーザー名を入力してください"、trigger: "blur"}
            ]
        }
    }
}

<!-- フォーム -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="銀行名:" prop="accountName" :rules="[{required:true,message:'銀行名を入力してください',trigger:'blur'}]">
        <el-input v-model="rulesForm.accountName" スタイル="幅:300px" 最大長さ="50"/>
    </el-form-item>
</el-form>

<!-- フォーム -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="銀行カード番号:" prop="accountNumber">
       <el-input v-model="rulesForm.accountNumber" スタイル="width:300px" 最大長さ="19"/>
    </el-form-item>
</el-form>

<スクリプト>
// 外部検証ルールの導入 import {validateAccountNumber} from "@/utils/validate";
 
// 銀行カードのアカウントが正しいかどうかを判定する const validatorAccountNumber = (rule, value, callback) => {
  if (!値) {
    return callback(new Error("アカウント情報を入力してください"));
  } それ以外 {
    if (validateAccountNumber(値)) {
      折り返し電話（）;
    } それ以外 {
      コールバックを返します(新しいエラー('アカウント形式が正しくありません'))
    }
  }
};
 
エクスポートデフォルト{
    データ（） {
        戻る {
            //他のデータ定義を省略します...
        
            // フォーム検証 formRules: {
                口座番号： [
                    {必須: true、バリデータ: validatorAccountNumber、トリガー: "blur"}
                ]
            }
        }
    }
}
</スクリプト>

/* 銀行口座 */
エクスポート関数validateAccountNumber(str) {
  定数reg = /^([1-9]{1})(\d{14}|\d{18})$/
  reg.test(str) を返す
}

<!-- フォーム -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item>
        <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
        <el-button @click="cancel">キャンセル</el-button>
    </el-form-item>
</el-form>

メソッド: {
    // 保存 onSubmit(formName) {
        this.$refs[formName].validate(valid => {
            （有効）の場合{
                console.log("送信成功!!");
            }それ以外{
                console.log("送信エラー!!");
            }
        });
    },
    // キャンセル cancel() {
        
    }
}

<テンプレート>
  <div class="アプリコンテナ">
    <el-tabs v-model="アクティブ名">
      <el-tab-pane label="フォーム" name="rulesPane" @tab-click="handleClick">
        <!-- フォーム -->
        <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
          <el-form-item label="ユーザー名:" prop="userName">
            <el-input v-model="rulesForm.userName" スタイル="幅:300px" 最大長さ="50"/>
          </el-form-item>
          <el-form-item label="銀行名:" prop="accountName" :rules="[{required:true,message:'銀行名を入力してください',trigger:'blur'}]">
            <el-input v-model="rulesForm.accountName" スタイル="幅:300px" 最大長さ="50"/>
          </el-form-item>
          <el-form-item label="銀行カード番号:" prop="accountNumber">
            <el-input v-model="rulesForm.accountNumber" スタイル="width:300px" 最大長さ="50"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
            <el-button @click="cancel">キャンセル</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</テンプレート>
 
<スクリプト>
「@/utils/validate」から{validateAccountNumber}をインポートします。
 
// 銀行カードのアカウントが正しいかどうかを判定する const validatorAccountNumber = (rule, value, callback) => {
  if (!値) {
    return callback(new Error("アカウント情報を入力してください"));
  } それ以外 {
    if (validateAccountNumber(値)) {
      折り返し電話（）;
    } それ以外 {
      コールバックを返します(新しいエラー('アカウント形式が正しくありません'))
    }
  }
};
 
エクスポートデフォルト{
  名前: 「ルール」、
  データ（） {
    戻る {
      アクティブ名: "rulesPane",
      デフォルトプロパティ: {
        子供: 「子供」、
        ラベル: "ラベル"
      },
      ルールフォーム: {
      },
      // フォーム検証 formRules: {
        ユーザー名: [
          {
            必須: true、
            メッセージ:「ユーザー名を入力してください」
            トリガー: 「ぼかし」
          }
        ]、
        口座番号： [
          {
            必須: true、
            バリデーター: validatorAccountNumber、
            トリガー: 「ぼかし」
          }
        ]、
      }
    };
  },
  作成された() {},
  マウント() {},
  メソッド: {
    ハンドルクリック(タブ) {
      
    },
    // キャンセル cancel() {
      
    },
    // 保存 onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        （有効）の場合{
          console.log("送信成功!!");
        } それ以外 {
          console.log("送信エラー!!");
          false を返します。
        }
      });
    }
  }
};
</スクリプト>
 
<スタイル lang="scss">
</スタイル>

/* 銀行口座 */
エクスポート関数validateAccountNumber(str) {
  定数reg = /^([1-9]{1})(\d{14}|\d{18})$/
  reg.test(str) を返す
}