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