Vue は携帯電話の認証コードによるログインを実装します

この記事では、携帯電話認証コードログインを実装するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

検証コード

<テンプレート>
  <div>
    <メイン>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="携帯電話番号" prop="電話">
          <el-input v-model="ruleForm.phone" placeholder="電話番号を入力してください" size=""
                    最大長="11"></el-input>
        </el-form-item>

        <el-form-item label="検証コード" prop="code">
          <el-row :span="24">
            <el-col :span="12">
              <el-input v-model="ruleForm.code" auto-complete="off" placeholder="確認コードを入力してください" size=""
                        最大長="4"
                        @keyup.enter.native="submitForm('ruleForm')"></el-input>
            </el-col>
            <el-col :span="12">
              <div class="ログインコード">
                <!--検証コードコンポーネント-->
                <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}"
                           :disabled="getCodeBtnDisable">{{ codeBtnWord }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form-item>

        <!--スライディング検証コンポーネント-->
        <確認></確認>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">ログイン</el-button>
        </el-form-item>
      </el-form>

    </el-main>
  </div>
</テンプレート>

使用されるVue検証ツールクラス

エクスポートデフォルト{
  // 入力を数字のみに制限します（小数点以下 2 桁まで入力できます）
  入力ポイント数制限(val) {
    if (val === 0 || val === "0" || val === "" || val === 未定義) {
      戻る "";
    } それ以外 {
      値を null にします。
      value = val.replace(/[^\d.]/g, ""); // "number" と "." 以外のすべての文字をクリアします。 value = value.replace(/\.{2,}/g, "."); // 最初の文字のみを保持します。余分な文字はすべてクリアします。 value = value
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 小数点は 2 桁しか入力できません return value;
    }
  },

  ルートを配列に渡す(ルート)
    定数matches = route.path.split('/')
    マッチ.シフト()
    newMatch = [] とする
    マッチ.map((item, i) => {
      if (matches[i - 1]) {
        アイテム = newMatch[i - 1] + '/' + アイテム
      }
      newMatch.push(アイテム)
    })
    newMatch = newMatch.map(item => {
      `/${item}` を返す
    })
    newMatchを返す
  },

  // パスワードは少なくとも8文字で、大文字、小文字、数字、特殊記号のうち3つを含む必要があります。testPassWord: function (str) {
    var rC = {
      lW: '[az]',
      uW: '[AZ]',
      nW: '[0-9]',
      sW: '[\\u0020-\\u002F\\u003A-\\u0040\\u005B-\\u0060\\u007B-\\u007E]'
    }
    関数 Reg (str, rStr) {
      var reg = 新しい RegExp(rStr)
      if (reg.test(str)) が true を返す
      それ以外の場合はfalseを返す
    }
    （文字列の長さが8未満の場合）{
      偽を返す
    } それ以外 {
      var tR = {
        l: Reg(str, rC.lW)、
        u: Reg(str, rC.uW)、
        n: Reg(str, rC.nW)、
        s: Reg(str, rC.sW)
      }
      もし ((tR.l && tR.u && tR.n) || (tR.l && tR.u && tR.s) || (tR.s && tR.u && tR.n) || (tR.s && tR.l && tR.n)) {
        // document.title = "パスワードは要件を満たしています"
        真を返す
      } それ以外 {
        偽を返す
      }
    }
  },

  // パスワード検証 8-30 文字 pwdReg: /^([0-9a-zA-Z]|(?:&)|(?:~)|(?:!)|(?:@)|(?:#)|(?:\$)|(?:%)|(?:\^)|(?:\*)){8,30}$/,

  // 電話番号認証 phoneReg: /^1[3|4|5|6|7|8][0-9]{9}$/,

  // 通貨フォーマット formatUSD (val, currency) {
    if (val === '' || val === '--' || val === 未定義) {
      戻る ' - '
    }
    // まずデータに小数点があるかどうかを判定します。let newVal = String(Number(val).toFixed(2))
    // 科学的記数法を通常の文字列表示に変換する if (newVal.includes('e+')) {
      newVal = Number(newVal).toLocaleString()
      newVal = this.unFormatAmount(newVal)
    }
    dotIdx = newVal.lastIndexOf('.') とします。
    let dotVal = '.00' // 小数点以下のデータを保持する if (dotIdx >= 0) {
      dotVal = newVal.substr(dotIdx, newVal.length)
      newVal = newVal.slice(0, dotIdx)
    }

    len = newVal.lengthとします
    arr = [] とします
    lastIndex = null とする
    （長さ＞0）の間{
      最後のインデックス = 長さ
      長さ -= 3
      arr.unshift(newVal.substring(len, lastIndex))
    }
    val = arr.join(',')

    if (通貨) {
      newVal = `${currency} ${val}${dotVal}`
    } それ以外 {
      // newVal = `$ ${val}${dotVal}`
      newVal = `￥ ${val}${dotVal}` // デフォルトは人民元}
    newValを返す
  },

  // 小数点や金額記号などを除いた金額をフォーマットします。整数を入力します formatAmount(val) {
    if (val === '' || val === '--' || val === 未定義) {
      戻る ' - '
    }
    （値 === 0 || 値 === '0'）の場合 {
      0を返す
    }
    // まずデータに小数点があるかどうかを判定します。let newVal = String(val)
    dotIdx = newVal.lastIndexOf('.') とします。
    ドットの長さを0にする
    (newVal.split('.').length > 1) の場合 {
      dotLength = newVal.split('.')[1].length
    }
    let dotVal = '' // 小数点以下のデータを保持する if (dotIdx >= 0) {
      newVal = 文字列(数値(val).toFixed(5))
      dotVal = newVal.substr(dotIdx, dotLength + 1)
      newVal = newVal.slice(0, dotIdx)
    }
    len = newVal.lengthとします
    arr = [] とします
    lastIndex = null とする
    （長さ＞0）の間{
      最後のインデックス = 長さ
      長さ -= 3
      arr.unshift(newVal.substring(len, lastIndex))
    }
    val = arr.join(',')
    （ドット値の長さが2未満の場合）
      ドット値 = ''
    }
    val + dotValを返す
  },

  // データが空かどうかを判定する isEmptyVal (val) {
    （val === 未定義 || val === ''）の場合{
      戻る ' - '
    } それ以外 {
      戻り値
    }
  },

    // 年、月、日の形式: 中国語表示モード (ch) とスプライシング モード // 注: 中国語表示モードは、インターフェイスを介してパラメータを渡す場合にのみ必要です。それ以外の場合は、アメリカ形式です YMD (現在、type='ch') {
    if (!now || now === 'null' || now === '--' || now === undefined) {
      戻る ' - '
    }
    if (数値(現在)) {
      now = 新しい日付(now)
    }
    // IEブラウザと互換性あり、YY-MM-DD形式 if (typeof now === 'string' && now.includes('-')) {
      今 = this.NewDate(今)
    }
    もし（今）{
      年 = ''とする
      月 = '' とする
      日付を「''」とする
      // ここでの 8 ビットは、20180423 のような形式を返すために使用されます。if (String(now).length === 8 && String(now).indexOf('-') === -1 && String(now).indexOf('/') === -1) {
        const getNow = String(now)
        `${getNow.substring(4, 6)}/${getNow.substring(6, 8)}/${getNow.substring(0, 4)}` を返します
      } それ以外 {
        now = 新しい日付(now)
        年 = now.getFullYear()
        月 = now.getMonth() + 1
        日付 = now.getDate()
      }
      (月 < 10) の場合 {
        月 = `0${月}`
      }
      （日付<10）の場合{
        日付 = `0${date}`
      }
      （タイプ === 'ch'）の場合{
        `${year}-${month}-${date}` を返します
      } それ以外の場合 (型) {
        `${year}${type}${month}${type}${date}` を返します
      } それ以外 {
        `${month}/${date}/${year}` を返します
      }
    } それ以外 {
      戻る ''
    }
  },

  // 時刻の形式は年、月、日、時、分、秒です。formatDate(now, type) {
    if (!now || now === 'null' || now === '--' || now === undefined) {
      戻る ' - '
    }
    もし（今）{
      now = 新しい日付(now)
      year = now.getFullYear() とします。
      月 = now.getMonth() + 1 とします。
      date = now.getDate() とします。
      hour = now.getHours() とします。
      分 = now.getMinutes() とします
      秒を now.getSeconds() とします。
      (月 < 10) の場合 {
        月 = `0${月}`
      }
      （日付<10）の場合{
        日付 = `0${date}`
      }
      (時間 < 10) の場合 {
        時間 = `0${時間}`
      }
      (分 < 10) の場合 {
        分 = `0${分}`
      }
      （秒数<10）の場合{
        秒 = `0${秒}`
      }
      if (型) {
        `${月}/${日}/${年} ${時}:${分}:${秒}` を返します
      } それ以外 {
        `${month}-${date}-${year}` を返します
      }
    } それ以外 {
      戻る ''
    }
  },
}

読みやすいように完全なものを載せてください

<テンプレート>
  <div>
    <メイン>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="携帯電話番号" prop="電話">
          <el-input v-model="ruleForm.phone" placeholder="電話番号を入力してください" size=""
                    最大長="11"></el-input>
        </el-form-item>

        <el-form-item label="検証コード" prop="code">
          <el-row :span="24">
            <el-col :span="12">
              <el-input v-model="ruleForm.code" auto-complete="off" placeholder="確認コードを入力してください" size=""
                        最大長="4"
                        @keyup.enter.native="submitForm('ruleForm')"></el-input>
            </el-col>
            <el-col :span="12">
              <div class="ログインコード">
                <!--検証コードコンポーネント-->
                <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}"
                           :disabled="getCodeBtnDisable">{{ codeBtnWord }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form-item>

        <!--スライディング検証コンポーネント-->
        <確認></確認>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">ログイン</el-button>
        </el-form-item>
      </el-form>

    </el-main>
  </div>
</テンプレート>

<スクリプト>
// ツールクラスをインポートします。 import Verify from "@/components/Verify";
「../utils/event」からイベントをインポートします
「@/utils/common」からcommonをインポートします。

パラメータを設定します。
エクスポートデフォルト{
  名前: "LoginIphone",
  コンポーネント: {Verify},
  データ（） {
    //正規表現を使用して電話番号を検証します const checkPhone = (rule, value, callback) => {
      if (!値) {
        return callback(new Error('電話番号は空にできません'));
      } それ以外 {
        //ツールクラス内の電話番号の正規表現を取得します。const reg = common.phoneReg
        // console.log(reg.test(値));
        if (reg.test(値)) {
          折り返し電話（）;
        } それ以外 {
          //検証入力が間違っている場合はクリアします this.ruleForm.phone = ''
          return callback(new Error('正しい電話番号を入力してください'));
        }
      }
    };

    戻る {
      ルールフォーム: {
        電話： ''、
        コード: ''、
      },

      codeBtnWord: '認証コードを取得', //認証コードボタンのテキストを取得// waitTime: 61, //認証コードボタンの有効期限を取得 waitTime: 2, //認証コードボタンの有効期限を取得// 検証ルール: {
        電話：
          {バリデータ: checkPhone、トリガー: 'blur'}
        ]、
        コード: [
          {必須: true、メッセージ: '確認パスワードを入力してください'、トリガー: 'blur'}
        ]
      }
    };
  },
  //計算されたプロパティ
  計算: {
    // 確認コード取得ボタンがクリック可能かどうかを制御します getCodeBtnDisable: {
      //ボタンを61秒に設定
      // 得る（） {
      // if (this.waitTime === 61) {
      // if (this.ruleForm.phone) {
      // falseを返す
      // }
      // true を返す
      // }
      // true を返す
      // }
      得る（） {
        （this.waitTime === 2）の場合{
          if (this.ruleForm.phone) {
            偽を返す
          }
          真を返す
        }
        真を返す
      },
      // 注: 計算プロパティ自体には set メソッドがないため、メソッド内での変更はサポートされません。以下でこれを実行するため、set() { を手動で追加する必要があります。
      }
    },

  }, メソッド: {

    取得コード() {
      const _this = これ
      パラメータ = {}
      params.phone = this.ruleForm.phone
      // SMS認証コードを呼び出します interface_this.$axios.post('/sendMessage', params).then(res => {
        console.log("--------バックグラウンド応答の値を確認してください-----", res)
        //すべてのデータを保存する const mydata = res.data.data
        console.log("SMS インターフェースにいます -->", mydata)

        //検証コードを保存 params.yz = mydata.vCode

        console.log("検証コードを確認しています-------" + mydata.vCode)
        console.log("呼び出し回数を確認しています-------" + mydata.count)

        （res.data.code === 200）の場合{
          this.$メッセージ({
            メッセージ: 「確認コードが送信されました。しばらくお待ちください...」
            タイプ: '成功'、
            中心: 真
          })
        }
        （res.data.data.count >= 5）の場合{
          //スライダー検証コンポーネントイベントを呼び出します。$emit("VERIFY")
        }

      })

      // 以下でタイマーが使用されるため、このポインタを保存する必要があります。let that = this
      that.waitTime--
      that.getCodeBtnDisable = true
      this.codeBtnWord = `${this.waitTime}s後に再取得`
      タイマー = setInterval(関数() {
        待機時間 > 1 の場合
          that.waitTime--
          that.codeBtnWord = `${that.waitTime}s後に取得`
        } それ以外 {
          クリアインターバル(タイマー)
          that.codeBtnWord = '認証コードを取得'
          that.getCodeBtnDisable = false
          // that.waitTime = 61
          待機時間 = 2
        }
      }, 1000)
    },
    送信フォーム(フォーム名) {
      const _this = これ
      //入力された検証コードが空かどうかを判断します if (this.ruleForm.code != null) {
        this.$refs[formName].validate((valid) => {
          （有効）の場合{

            _this.$axios.post("/iosLogin", {
              "電話": this.ruleForm.phone,
              「検証」: this.ruleForm.code
            }).then(res => {

              コンソールログ(res.data)
            })


            // console.log("送信中です:", par)
            //
            // 定数 jwt = par.headers['authorization']
            // console.log("私はトークンです->", jwt)
            // 定数 userInfo = par.data.data
            // console.log("ユーザー情報の表示=", userInfo)
            //
            // // データを共有する // _this.$store.commit("SET_TOKEN", jwt)
            // _this.$store.commit("SET_USERINFO", ユーザー情報)
            //
            // // 取得 // console.log("_this.$store.getters.getUser を取得しました")
            // コンソールログ(_this.$store.getters.getUser)

            // _this.$router.push("/blogs")

          } それ以外 {
            console.log('送信エラー!!');
            false を返します。
          }
        });
      } それ以外 {
        this.$メッセージ({
          表示閉じる: true,
          メッセージ: 「エラーを入力してください」
          タイプ: 'エラー'
        });
      }
    }

  }

}
</スクリプト>
<スタイルスコープ>
.el-button.disabled-style {
  背景色: #EEEEEE;
  色: #CCCCCC;
}

.demo-ruleForm {
  最大幅: 500px;
  マージン: 0 自動;
}
</スタイル>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: