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

#提供了一些前端代码和后端的Vuex store实现#

场景：Vue.js和Nuxt.js、element ui。在这个空的登录注册页实现注册登录校验

添加表单校验

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

export default {   
data(){   
        return {
                rules:{ mobile,smsCode}
               }
      } 
}

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

<template>
  <div class="com-form-login">
    <!-- ...原有代码... -->
    <el-form 
      label-position="top" 
      label-width="80px"
      :model="loginParams"
      :rules="rules"
      ref="loginForm"  <!-- 新增ref -->
    >
      <el-form-item prop="mobile">  <!-- 添加prop -->
        <el-input v-model="loginParams.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="smsCode">  <!-- 添加prop -->
        <span v-if="isLoading">发送中...</span>
        <el-input v-model="loginParams.smsCode" placeholder="请输入短信验证码"></el-input>
        <!-- ...原有按钮代码... -->
      </el-form-item>
      <!-- ...其他代码... -->
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    // 手机号验证规则
    const validateMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      }
      if (!/^1[3-9]\d{9}$/.test(value)) {
        return callback(new Error('请输入有效的手机号码'));
      }
      callback();
    };

    // 验证码规则
    const validateSmsCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验证码不能为空'));
      }
      if (!/^\d{6}$/.test(value)) {
        return callback(new Error('验证码必须是6位数字'));
      }
      callback();
    };

    return {
      // 新增校验规则
      rules: {
        mobile: [
          { required: true, validator: validateMobile, trigger: 'blur' }
        ],
        smsCode: [
          { required: true, validator: validateSmsCode, trigger: 'blur' }
        ]
      },
      // ...其他原有data...
    }
  },
  methods: {
    async sendCode() {
      // 先验证手机号格式
      try {
        await this.$refs.loginForm.validateField('mobile');
        this.isLoading = true;
        const res = await sendCode({
          mobile: this.loginParams.mobile
        });
        if (res.status === 200) {
          this.startCountdown();
        } else {
          this.$message.error(res.data?.error || '验证码发送失败');
        }
      } catch (error) {
        // 验证失败会自动显示错误信息
      } finally {
        this.isLoading = false;
      }
    },

    async execLogin() {
      try {
        // 验证整个表单
        const valid = await this.$refs.loginForm.validate();
        if (!valid) return;
        
        this.loading = true;
        const res = await this.login(this.loginParams);
        if (res.status === 200) {
          this.$message.success('登录成功');
          // ...原有跳转逻辑...
        }
      } catch (error) {
        // 错误处理由element自动处理
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

实现效果

1. 手机号输入时会实时验证格式

2. 点击发送验证码时会先验证手机号格式

3. 提交时会验证所有字段

4. 验证不通过时自动显示错误提示

     如果有需要也可以写上5-10分钟的验证码有效期，同时在前端这里加上一个倒计时计时器，当发送验证码开始倒计时。

参考资料：

1.Vue+elementUI el-input输入框手机号校验_elementui验证手机号-CSDN博客