目次
(1) まず、検証コードを取得するメソッドをバインドします。
(2) 次に、axios インターフェースをカプセル化します。これは、後で共同デバッグをテストするのに便利です (この部分のカプセル化方法は人によって異なります)。
レンダリング:
1. テンプレート部分
これは重要ではありません。自分で比較してください。まったく同じである必要はありません
<div>
<el-form
ref="form"
label-width="70px"
:inline="true"
class="login-container"
:model="form"
:rules="rules"
>
<h3 class="login_title"> 手 机 验 证 登 录 </h3>
<el-form-item
label="手机号"
prop="CellPhone"
ref="phone"
>
<el-input v-model="form.CellPhone" placeholder="请输入手机号">
<el-select placeholder="+86"></el-select>
</el-input>
</el-form-item>
<el-form-item
label="验证码"
prop="VerificationCode"
>
<el-input v-model="form.VerificationCode" placeholder="请输入验证码">
<el-button slot="suffix" :disabled="disabled" @click="getCode">
<span class="Time">{
{btnTxt}}</span>
</el-button>
</el-input>
</el-form-item>
<el-form-item>
<el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button>
</el-form-item>
</el-form>
</div>2、スタイルスタイル
スタイルをlessで書いたので、書く前にlessとless-loaderをインストールする必要があります
npm i less
npm i less-loader
バージョンに注意してください。新しすぎたり、長すぎたりすると、実行に失敗する可能性があります。
残っているのはスタイリングだけです。
<style lang="less" scoped>
.login-container {
width: 450px;
border:1px solid #eaeaea;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 15px;
box-shadow: 0 0 25px #cac6c6;
background-color: #ffffff;
box-sizing: border-box;
//修改element的样式的方法有多种，/deep/只是其中一种
/deep/ .el-input__inner {
width: 120%;
border: 0px;
border-bottom: 1px solid;
}
.el-button {
border: 0px;
margin: -80px;
.span {
margin-left: 50px;
}
}
.login_title {
text-align: center;
margin-bottom: 40px;
color: #505458;
}
.el-input {
width: 198px;
}
.login_button {
margin-left: 105px;
margin-top: 10px;
}
.time {
width: 50px;
}
}
</style>このスタイルでは 1 行のコードで記述できるものの一部は複数行を使用しており、自分で変更できます (なぜ変更しなかったのかは聞かないでください)。
3、スクリプト部分
1.まず携帯電話番号の形式を判断する
const validatePhone = (rule, value, callback) => {
// console.log(rule)
// console.log(value)
// console.log(callback)
// 判断输入框中是否输入手机号
if (!value) {
callback(new Error('手机号不能为空'))
}
//正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
if (!/^1[35789]\d{9}$/.test(value)) {
callback(new Error('手机号格式不正确'))
}
callback()
}2. 次に、フォーム検証ルールのルールです。
rules: {
CellPhone: [
{ required: true, trigger: 'blur', message: '请输入11位手机号'},
{ required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
{ required: true, trigger: 'blur', validator: validatePhone}
],
VerificationCode: [
{ required: true, trigger: 'blur', message: '请输入4位验证码'},
{ required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}
],
}| 必要 | 必須ですか? 設定されていない場合は、検証ルールに従って自動的に生成されます | ブール値 | — | 間違い |
| 引き金 | トリガーメソッド | 弦 | クリック/フォーカス/ホバー/手動 | クリック |
| ぼかし | 入力がフォーカスを失ったときにトリガーされます | （イベント：イベント） |
| 検証 | フォーム全体を検証するメソッド、パラメータはコールバック関数です。検証が完了するとコールバック関数が呼び出され、検証が成功したかどうかと検証に失敗したフィールドの 2 つのパラメータが渡されます。コールバック関数が渡されない場合は、Promise が返されます。 | 関数(コールバック: 関数(ブール値、オブジェクト)) |
3. 最後はメソッドです
(1) まず、検証コードを取得するメソッドをバインドします。
//获取手机验证码方法
getCode() {
// 校验手机号码
if (!this.form.CellPhone) {
//号码校验不通过
this.$message({
message: '请输入手机号',
type:'warning',
});
//正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
} else if (!/1[35789]\d{9}/.test(this.form.CellPhone)) {
// 失去焦点后自动触发校验手机号规则
} else {
this.time = 60;
this.disabled = true;
//调用倒计时方法
this.timer();
}
}(2) 次に、axios インターフェースをカプセル化します。これは、後で共同デバッグをテストするのに便利です (この部分のカプセル化方法は人によって異なります)。
GetPhone({
CellPhone: this.form.CellPhone,
}) .then(({data}) => {
if (data.code === 200) {
this.$message({
message: '验证成功',
type: 'success',
})
} else {
this.$message({
message: '发送失败',
type: 'warning',
})
}
})(3) 次にカウントダウン方式
timer() {
if (this.time > 0) {
this.time--;
// console.log(this.time);
this.btnTxt = this.time + "s后重新获取验证码";
setTimeout(this.timer, 1000);
} else {
this.time = 0;
this.btnTxt = "获取验证码";
this.disabled = false;
}
},(4) 最終ログインボタン
submit() {
this.getCode(({data}) => {
if (data.code === 200) {
this.$router.push('/')
} else {
this.$message.error(data.data.rules.message)
}
})
}4. 完全なコード
<template>
<div>
<el-form
ref="form"
label-width="70px"
:inline="true"
class="login-container"
:model="form"
:rules="rules"
>
<h3 class="login_title"> 手 机 验 证 登 录 </h3>
<el-form-item
label="手机号"
prop="CellPhone"
ref="phone"
>
<el-input v-model="form.CellPhone" placeholder="请输入手机号">
<el-select placeholder="+86"></el-select>
</el-input>
</el-form-item>
<el-form-item
label="验证码"
prop="VerificationCode"
>
<el-input v-model="form.VerificationCode" placeholder="请输入验证码">
<el-button slot="suffix" :disabled="disabled" @click="getCode">
<span class="Time">{
{btnTxt}}</span>
</el-button>
</el-input>
</el-form-item>
<el-form-item>
<el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {GetPhone} from "@/Api/api";
export default {
name: "AppPhone",
data() {
const validatePhone = (rule, value, callback) => {
// console.log(rule)
// console.log(value)
// console.log(callback)
// 判断输入框中是否输入手机号
if (!value) {
callback(new Error('手机号不能为空'))
}
//正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
if (!/^1[35789]\d{9}$/.test(value)) {
callback(new Error('手机号格式不正确'))
}
callback()
}
return {
btnTxt: "获取验证码",
// 是否禁用 即点击之后一段时间内无法再点击
disabled: false,
time: 0,
form: {
CellPhone: '',
VerificationCode: '',
},
rules: {
CellPhone: [
{ required: true, trigger: 'blur', message: '请输入11位手机号'},
{ required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
{ required: true, trigger: 'blur', validator: validatePhone}
],
VerificationCode: [
{ required: true, trigger: 'blur', message: '请输入4位验证码'},
{ required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}
],
}
}
},
methods: {
//获取手机验证码方法
getCode() {
// 校验手机号码
if (!this.form.CellPhone) {
//号码校验不通过
this.$message({
message: '请输入手机号',
type:'warning',
});
//正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
} else if (!/1[35789]\d{9}/.test(this.form.CellPhone)) {
// 失去焦点后自动触发校验手机号规则
} else {
this.time = 60;
this.disabled = true;
//调用倒计时方法
this.timer();
// 封装的axios接口
GetPhone({
CellPhone: this.form.CellPhone,
}) .then(({data}) => {
if (data.code === 200) {
this.$message({
message: '验证成功',
type: 'success',
})
} else {
this.$message({
message: '发送失败',
type: 'warning',
})
}
})
}
},
// 倒计时方法
timer() {
if (this.time > 0) {
this.time--;
// console.log(this.time);
this.btnTxt = this.time + "s后重新获取验证码";
setTimeout(this.timer, 1000);
} else {
this.time = 0;
this.btnTxt = "获取验证码";
this.disabled = false;
}
},
// 提交按钮
submit() {
this.getCode(({data}) => {
if (data.code === 200) {
this.$router.push('/')
} else {
this.$message.error(data.data.rules.message)
}
})
}
}
}
</script>
<style lang="less" scoped>
.login-container {
width: 450px;
border:1px solid #eaeaea;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 15px;
box-shadow: 0 0 25px #cac6c6;
background-color: #ffffff;
box-sizing: border-box;
/deep/ .el-input__inner {
width: 120%;
border: 0px;
border-bottom: 1px solid;
}
.el-button {
border: 0px;
margin: -80px;
.span {
margin-left: 50px;
}
}
.login_title {
text-align: center;
margin-bottom: 40px;
color: #505458;
}
.el-input {
width: 198px;
}
.login_button {
margin-left: 105px;
margin-top: 10px;
}
.time {
width: 50px;
}
}
</style>