【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面，路由式开发（附完整代码）

目录

效果图：

一、template部分

二、style样式

三、script部分

1.先对手机号的格式进行一个判断

2.接下来就是表单验证规则rules

3.最后就是methods了

（1）首先我们给获取验证码绑定一个方法

（2）然后封装一个axios接口，方便后面测试联调（这部分每个人封装的都不一样）

（3）然后是倒计时的方法

（4）最后的登录按钮

四、完整代码

---

效果图：

一、template部分

这里不是重点，自行对照，并不需要与之完全相同

1. <div>
2. <el-form
3. ref="form"
4. label-width="70px"
5. :inline="true"
6. class="login-container"
7. :model="form"
8. :rules="rules"
9. >
10. <h3 class="login_title"> 手 机 验 证 登 录 h3>
12. <el-form-item
13. label="手机号"
14. prop="CellPhone"
15. ref="phone"
16. >
17. <el-input v-model="form.CellPhone" placeholder="请输入手机号">
18. <el-select placeholder="+86">el-select>
19. el-input>
20. el-form-item>
22. <el-form-item
23. label="验证码"
24. prop="VerificationCode"
25. >
26. <el-input v-model="form.VerificationCode" placeholder="请输入验证码">
27. <el-button slot="suffix" :disabled="disabled" @click="getCode">
28. <span class="Time">{{btnTxt}}span>
29. el-button>
30. el-input>
31. el-form-item>
33. <el-form-item>
34. <el-button @click="submit" class="login_button" type="primary"> 登 录 el-button>
35. el-form-item>
36. el-form>
37. div>

二、style样式

样式我是用less写的，编写之前需要安装less和less-loader

npm i less npm i less-loader

值得注意的是，要注意版本，太新或者太久都可能导致无法运行

剩下的就是样式了：

1. <style lang="less" scoped>
2. .login-container {
3. width: 450px;
4. border:1px solid #eaeaea;
5. margin: 180px auto;
6. padding: 35px 35px 15px 35px;
7. border-radius: 15px;
8. box-shadow: 0 0 25px #cac6c6;
9. background-color: #ffffff;
10. box-sizing: border-box;
11. //修改element的样式的方法有多种，/deep/只是其中一种
12. /deep/ .el-input__inner {
13. width: 120%;
14. border: 0px;
15. border-bottom: 1px solid;
16. }
17. .el-button {
18. border: 0px;
19. margin: -80px;
20. .span {
21. margin-left: 50px;
22. }
23. }
24. .login_title {
25. text-align: center;
26. margin-bottom: 40px;
27. color: #505458;
28. }
29. .el-input {
30. width: 198px;
31. }
32. .login_button {
33. margin-left: 105px;
34. margin-top: 10px;
35. }
36. .time {
37. width: 50px;
38. }
39. }
41. style>

样式里有的一行代码能写完的东西用了多行，可自行修改（别问我为什么不改）

三、script部分

1.先对手机号的格式进行一个判断

1. const validatePhone = (rule, value, callback) => {
2. // console.log(rule)
3. // console.log(value)
4. // console.log(callback)
6. // 判断输入框中是否输入手机号
7. if (!value) {
8. callback(new Error('手机号不能为空'))
9. }
10. //正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
11. if (!/^1[35789]\d{9}$/.test(value)) {
12. callback(new Error('手机号格式不正确'))
13. }
14. callback()
15. }

2.接下来就是表单验证规则rules

1. rules: {
2. CellPhone: [
3. { required: true, trigger: 'blur', message: '请输入11位手机号'},
4. { required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
5. { required: true, trigger: 'blur', validator: validatePhone}
6. ],
7. VerificationCode: [
8. { required: true, trigger: 'blur', message: '请输入4位验证码'},
9. { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}
10. ],
11. }

required

是否必填，如不设置，则会根据校验规则自动生成

boolean

—

false

trigger

触发方式

String

click/focus/hover/manual

click

blur

在 Input 失去焦点时触发

(event: Event)

validate

对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

Function(callback: Function(boolean, object))

3.最后就是methods了

（1）首先我们给获取验证码绑定一个方法

1. //获取手机验证码方法
2. getCode() {
3. // 校验手机号码
4. if (!this.form.CellPhone) {
5. //号码校验不通过
6. this.$message({
7. message: '请输入手机号',
8. type:'warning',
9. });
10. //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
11. } else if (!/1[35789]\d{9}/.test(this.form.CellPhone)) {
12. // 失去焦点后自动触发校验手机号规则
13. } else {
14. this.time = 60;
15. this.disabled = true;
16. //调用倒计时方法
17. this.timer();
18. }
19. }

（2）然后封装一个axios接口，方便后面测试联调（这部分每个人封装的都不一样）

1. GetPhone({
2. CellPhone: this.form.CellPhone,
3. }) .then(({data}) => {
4. if (data.code === 200) {
5. this.$message({
6. message: '验证成功',
7. type: 'success',
8. })
9. } else {
10. this.$message({
11. message: '发送失败',
12. type: 'warning',
13. })
14. }
15. })

（3）然后是倒计时的方法

1. timer() {
2. if (this.time > 0) {
3. this.time--;
4. // console.log(this.time);
5. this.btnTxt = this.time + "s后重新获取验证码";
6. setTimeout(this.timer, 1000);
7. } else {
8. this.time = 0;
9. this.btnTxt = "获取验证码";
10. this.disabled = false;
11. }
12. },

（4）最后的登录按钮

1. submit() {
2. this.getCode(({data}) => {
3. if (data.code === 200) {
4. this.$router.push('/')
5. } else {
6. this.$message.error(data.data.rules.message)
7. }
8. })
9. }

四、完整代码

1. <template>
2. <div>
3. <el-form
4. ref="form"
5. label-width="70px"
6. :inline="true"
7. class="login-container"
8. :model="form"
9. :rules="rules"
10. >
11. <h3 class="login_title"> 手 机 验 证 登 录 h3>
13. <el-form-item
14. label="手机号"
15. prop="CellPhone"
16. ref="phone"
17. >
18. <el-input v-model="form.CellPhone" placeholder="请输入手机号">
19. <el-select placeholder="+86">el-select>
20. el-input>
21. el-form-item>
23. <el-form-item
24. label="验证码"
25. prop="VerificationCode"
26. >
27. <el-input v-model="form.VerificationCode" placeholder="请输入验证码">
28. <el-button slot="suffix" :disabled="disabled" @click="getCode">
29. <span class="Time">{{btnTxt}}span>
30. el-button>
31. el-input>
32. el-form-item>
34. <el-form-item>
35. <el-button @click="submit" class="login_button" type="primary"> 登 录 el-button>
36. el-form-item>
37. el-form>
38. div>
39. template>
41. <script>
42. import {GetPhone} from "@/Api/api";
44. export default {
45. name: "AppPhone",
46. data() {
47. const validatePhone = (rule, value, callback) => {
48. // console.log(rule)
49. // console.log(value)
50. // console.log(callback)
51. // 判断输入框中是否输入手机号
52. if (!value) {
53. callback(new Error('手机号不能为空'))
54. }
55. //正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
56. if (!/^1[35789]\d{9}$/.test(value)) {
57. callback(new Error('手机号格式不正确'))
58. }
59. callback()
60. }
61. return {
62. btnTxt: "获取验证码",
63. // 是否禁用 即点击之后一段时间内无法再点击
64. disabled: false,
65. time: 0,
66. form: {
67. CellPhone: '',
68. VerificationCode: '',
69. },
70. rules: {
71. CellPhone: [
72. { required: true, trigger: 'blur', message: '请输入11位手机号'},
73. { required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
74. { required: true, trigger: 'blur', validator: validatePhone}
75. ],
76. VerificationCode: [
77. { required: true, trigger: 'blur', message: '请输入4位验证码'},
78. { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}
79. ],
80. }
81. }
82. },
83. methods: {
84. //获取手机验证码方法
85. getCode() {
86. // 校验手机号码
87. if (!this.form.CellPhone) {
88. //号码校验不通过
89. this.$message({
90. message: '请输入手机号',
91. type:'warning',
92. });
93. //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
94. } else if (!/1[35789]\d{9}/.test(this.form.CellPhone)) {
95. // 失去焦点后自动触发校验手机号规则
96. } else {
97. this.time = 60;
98. this.disabled = true;
99. //调用倒计时方法
100. this.timer();
101. // 封装的axios接口
102. GetPhone({
103. CellPhone: this.form.CellPhone,
104. }) .then(({data}) => {
105. if (data.code === 200) {
106. this.$message({
107. message: '验证成功',
108. type: 'success',
109. })
110. } else {
111. this.$message({
112. message: '发送失败',
113. type: 'warning',
114. })
115. }
116. })
117. }
118. },
119. // 倒计时方法
120. timer() {
121. if (this.time > 0) {
122. this.time--;
123. // console.log(this.time);
124. this.btnTxt = this.time + "s后重新获取验证码";
125. setTimeout(this.timer, 1000);
126. } else {
127. this.time = 0;
128. this.btnTxt = "获取验证码";
129. this.disabled = false;
130. }
131. },
132. // 提交按钮
133. submit() {
134. this.getCode(({data}) => {
135. if (data.code === 200) {
136. this.$router.push('/')
137. } else {
138. this.$message.error(data.data.rules.message)
139. }
140. })
141. }
142. }
143. }
144. script>
146. <style lang="less" scoped>
147. .login-container {
148. width: 450px;
149. border:1px solid #eaeaea;
150. margin: 180px auto;
151. padding: 35px 35px 15px 35px;
152. border-radius: 15px;
153. box-shadow: 0 0 25px #cac6c6;
154. background-color: #ffffff;
155. box-sizing: border-box;
156. /deep/ .el-input__inner {
157. width: 120%;
158. border: 0px;
159. border-bottom: 1px solid;
160. }
161. .el-button {
162. border: 0px;
163. margin: -80px;
164. .span {
165. margin-left: 50px;
166. }
167. }
168. .login_title {
169. text-align: center;
170. margin-bottom: 40px;
171. color: #505458;
172. }
173. .el-input {
174. width: 198px;
175. }
176. .login_button {
177. margin-left: 105px;
178. margin-top: 10px;
179. }
180. .time {
181. width: 50px;
182. }
183. }
185. style>

 若有不足或错误之处，欢迎指点