【Vue】element UI注册手机号+验证码校验+表单验证

#提供了一些前端代码和后端的Vuex store实现#
场景：Vue.js和Nuxt.js、element ui。在这个空的登录注册页实现注册登录校验

添加表单校验

在原有代码底子上，<el-form-item>加上prop属性，属性名称对应

1. export default {   
2. data(){   
3.         return {
4.                 rules:{ mobile,smsCode}
5.                }
6.       }
7. }

复制代码

发送验证码方法调用的时间可以先辈行手机号验证。这里在后端哀求之后，也可以后端同时举行二次验证确保数据安全。

1. <template>
2.   <div class="com-form-login">
3.     <!-- ...原有代码... -->
4.     <el-form
5.       label-position="top"
6.       label-width="80px"
7.       :model="loginParams"
8.       :rules="rules"
9.       ref="loginForm"  <!-- 新增ref -->
10.     >
11.       <el-form-item prop="mobile">  <!-- 添加prop -->
12.         <el-input v-model="loginParams.mobile" placeholder="请输入手机号"></el-input>
13.       </el-form-item>
14.       <el-form-item prop="smsCode">  <!-- 添加prop -->
15.         <span v-if="isLoading">发送中...</span>
16.         <el-input v-model="loginParams.smsCode" placeholder="请输入短信验证码"></el-input>
17.         <!-- ...原有按钮代码... -->
18.       </el-form-item>
19.       <!-- ...其他代码... -->
20.     </el-form>
21.   </div>
22. </template>
24. <script>
25. export default {
26.   data() {
27.     // 手机号验证规则
28.     const validateMobile = (rule, value, callback) => {
29.       if (!value) {
30.         return callback(new Error('手机号不能为空'));
31.       }
32.       if (!/^1[3-9]\d{9}$/.test(value)) {
33.         return callback(new Error('请输入有效的手机号码'));
34.       }
35.       callback();
36.     };
38.     // 验证码规则
39.     const validateSmsCode = (rule, value, callback) => {
40.       if (!value) {
41.         return callback(new Error('验证码不能为空'));
42.       }
43.       if (!/^\d{6}$/.test(value)) {
44.         return callback(new Error('验证码必须是6位数字'));
45.       }
46.       callback();
47.     };
49.     return {
50.       // 新增校验规则
51.       rules: {
52.         mobile: [
53.           { required: true, validator: validateMobile, trigger: 'blur' }
54.         ],
55.         smsCode: [
56.           { required: true, validator: validateSmsCode, trigger: 'blur' }
57.         ]
58.       },
59.       // ...其他原有data...
60.     }
61.   },
62.   methods: {
63.     async sendCode() {
64.       // 先验证手机号格式
65.       try {
66.         await this.$refs.loginForm.validateField('mobile');
67.         this.isLoading = true;
68.         const res = await sendCode({
69.           mobile: this.loginParams.mobile
70.         });
71.         if (res.status === 200) {
72.           this.startCountdown();
73.         } else {
74.           this.$message.error(res.data?.error || '验证码发送失败');
75.         }
76.       } catch (error) {
77.         // 验证失败会自动显示错误信息
78.       } finally {
79.         this.isLoading = false;
80.       }
81.     },
83.     async execLogin() {
84.       try {
85.         // 验证整个表单
86.         const valid = await this.$refs.loginForm.validate();
87.         if (!valid) return;
88.         
89.         this.loading = true;
90.         const res = await this.login(this.loginParams);
91.         if (res.status === 200) {
92.           this.$message.success('登录成功');
93.           // ...原有跳转逻辑...
94.         }
95.       } catch (error) {
96.         // 错误处理由element自动处理
97.       } finally {
98.         this.loading = false;
99.       }
100.     }
101.   }
102. }
103. </script>

复制代码

实现结果

• 手机号输入时会实时验证格式
  
• 点击发送验证码时会先验证手机号格式
  
• 提交时会验证全部字段
  
• 验证不通过期主动体现错误提示
  

     如果有须要也可以写上5-10分钟的验证码有用期，同时在前端这里加上一个倒计时计时器，当发送验证码开始倒计时。
参考资料：
1.Vue+elementUI el-input输入框手机号校验_elementui验证手机号-CSDN博客