この記事では、携帯電話認証コードログインを実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTML の div と span の違い (共通点と相違点)
>>: Nginx の場所に関する一般的なルールの優先順位の問題
Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...
序文: Docker はオープンソースのアプリケーション コンテナ エンジンであり、開発者はこれを使...
1.ターミナルに入ったらPHPのバージョンを確認するphp -v出力は次のようになります。 PHP ...
gzip は、Linux システムでファイルの圧縮と解凍によく使用されるコマンドです。このコマンドで...
Docker-compose は GitLab をデプロイします1. Dockerをインストールする...
目次問題の説明MySQLオンラインDDLで列を追加する従来の方法01 コピー方法02 インプレースメ...
この記事では、Webページの画像の回転を実現するためのjsの具体的なコードを参考までに共有します。具...
1. 監視アーキテクチャ図 2. 実装のアイデアJenkins に Metrics プラグインをイン...
Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...
導入データベースを使用したことがある人なら、機能面での like 記号と = 記号の類似点と相違点を...
概要オンラインサービスへのアクセス中に 500 または 502 エラーが発生した場合、緊急処理とトラ...
目次1. インストール要件2. OSイメージのダウンロード3. VMware Workstation...
1 カーネルにtunモジュールがあるかどうかを確認する modinfo tun modprobe t...
この記事では、テーブルの動的な色の変更を実現するためのJavaScriptの具体的なコードを参考まで...
目次1.1. IP経由のコンテナ間のネットワークアクセス1.2. コンテナ名またはコンテナIDによる...