Table of contents
1. First make a judgment on the format of the mobile phone number
2. Next is the form validation rules rules
(1) First, we bind a method to obtain the verification code
Renderings:
1. The template part
This is not the point, compare it yourself, it does not need to be exactly the same
<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>Two, style style
I wrote the style in less , and I need to install less and less-loader before writing
npm i less
npm i less-loader
It is worth noting that pay attention to the version, too new or too long may cause it to fail to run
All that's left is the styling:
<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>Some of the things that can be written in one line of code in the style use multiple lines, which can be modified by yourself ( don’t ask me why I didn’t change it )
Three, the script part
1. First make a judgment on the format of the mobile phone number
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. Next is the form validation rules rules
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: '验证码错误'}
],
}| required | Is it required? If not set, it will be automatically generated according to the verification rules | boolean | — | false |
| trigger | trigger method | String | click/focus/hover/manual | click |
| blur | Triggered when the Input loses focus | (event: Event) |
| validate | The method to validate the entire form, the parameter is a callback function. The callback function will be called after the verification is completed, and two parameters are passed in: whether the verification is successful and the field that failed the verification. If no callback function is passed in, a promise will be returned | Function(callback: Function(boolean, object)) |
3. The last is the methods
(1) First, we bind a method to obtain the verification code
//获取手机验证码方法
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) Then encapsulate an axios interface, which is convenient for testing joint debugging later (everyone encapsulates this part differently)
GetPhone({
CellPhone: this.form.CellPhone,
}) .then(({data}) => {
if (data.code === 200) {
this.$message({
message: '验证成功',
type: 'success',
})
} else {
this.$message({
message: '发送失败',
type: 'warning',
})
}
})(3) Then the countdown method
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) The last login button
submit() {
this.getCode(({data}) => {
if (data.code === 200) {
this.$router.push('/')
} else {
this.$message.error(data.data.rules.message)
}
})
}4. Complete code
<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>