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 の場所に関する一般的なルールの優先順位の問題
推薦する
MySQLデータ内の多数の改行と復帰に対する解決策
目次問題を見つける1. 改行と復帰を削除する方法2. SELECTクエリで「改行と復帰」を無視する方...
CentOS で RPM を使用して MySQL 5.6 をインストールするチュートリアル
これまでのプロジェクトはすべて Windows システム環境にデプロイされていました。今回は Lin...
Node.js とブラウザのグローバル オブジェクトの違いの概要
Node.js では、.js ファイルは完全なスコープ (モジュール) です。したがって、var に...
nginxリバースプロキシによるセッション障害の問題の解決策
同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...
トークン生成と検証を実装するミニプログラム
目次プロセスデモミニプログラムバックエンドインターフェースプロセス各リクエストインターフェースは検証...
JavaScriptで配列かどうかを判断するためのさまざまな方法のまとめ
目次序文配列.isArrayコンストラクタインスタンスプロトタイプオブジェクト.プロトタイプ.toS...
JSON.stringify のさまざまな用途のまとめ
序文json を使用したことがある人なら、オブジェクトを文字列化してからバックエンドに送信するのが一...
この記事ではCSSの組み合わせセレクターの使い方を説明します
CSS 組み合わせセレクターには、単純なセレクターのさまざまな組み合わせが含まれます。 CSS3 に...
CSSオーバーフローメカニズムについての簡単な説明
CSS オーバーフローのメカニズムを詳細に学ぶ必要があるのはなぜですか?実際の開発プロセスでは、コン...
JavaScript におけるさまざまなバイナリオブジェクトの関係の詳細な説明
目次序文さまざまなオブジェクト間の関係配列バッファ型付き配列Uint8ClampedArray文字間...
Linux Zabbixカスタム監視およびアラーム実装プロセスの分析
ターゲットzabbix フロントエンド監視の iostat コマンドでデータの 1 つを表示します。...
フィールドを結合するSQL関数
最近、関連テーブル内のすべてのフィールドをクエリし、それらを 1 つのフィールドに再グループ化する必...
Mac 向け MySQL のインストールと設定のチュートリアル
この記事では、MacでのMySQLインストールチュートリアルを参考までに紹介します。具体的な内容は次...
横スクロールウェブサイトデザインの概要
水平スクロールはあらゆる状況に適しているわけではありませんが、適切に行えば、Web サイトを他のサイ...
better-scrollプラグインのスライドできないバグについて（2021年プラグインで解決）
より良いスクロールの原則親コンテナーであるため、ラッパーの高さはコンテンツのサイズに応じて増加します...