vue+axios+element+ui实现手机发送验证码及校验验证码功能

Posted 2021-07-18 老张在线敲代码

配合express拿到官网接口

1.首先布局，使用element表单输入框，标签上面相应的绑定了一些事件以及校验规则，下面逻辑代码中有注释

<div class="wrap">
    <el-form class="loginForm" :model="loginForm" :rules="loginFormRules" ref="loginFormRef"
label-position="top" v-show=showPhone>
    <el-form-item label="手机号" prop="phone">
    	<el-input v-model="loginForm.phone"></el-input>
 	</el-form-item>
    <el-form-item label="手机验证码" prop="captcha">
        <el-input v-model=" loginForm.captcha">
     <template slot="append">
                                            <!--  -->
        <el-button v-if="loginForm.showloginCode" type="primary"
                                                @click="getloginPhoneCode">获取验证码</el-button>
        <div v-else>{{ loginForm.count }}</div>
      </template>
      </el-input>
   </el-form-item>
   <el-form-item class="btns">
         <el-button type="primary" @click="handleLogin">登录</el-button>

         <el-button v-on:click="ToCode" type="button">切换为扫码登陆</el-button>
         <!-- <span @click="isCaptcha">111</span> -->
         </el-form-item>
      </el-form>
 </div>

2.data下面写入对手机号以及验证码校验，验证是否合法

 // 正则验证手机号是否合法
   var checkMobile = (rules, value, callback) => {
   const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
   if (regMobile.test(value) == true) {
      return callback();
    } else {
        callback(new Error("请输入合法的手机号"));
      }
   };
   
 // 验证输入的手机号验证码是否和手机接收到的验证码相同
    var checkPhoneCode = (rules, value, callback) => {
     if (value == this.loginForm.captcha) {
  return callback();
      } else {
  callback(new Error("验证码错误"));
      }
    };

3.return下面设置校验规则以及初始值

 			loginForm: {
                    phone: "", //手机号
                    captcha: "", //验证码
                    timer: null, //定时器的开关
                    showloginCode: true, //获取成功验证码后倒计时跟获取不成功后没有倒计时按钮的开关
                    count: "", //倒计时
                },
                // 验证规则
                loginFormRules: {
                    phone: [{
                            required: true,
                            message: "请输入手机号",
                            trigger: "blur"
                        },
                        {
                            validator: checkMobile,
                            trigger: "blur"
                        },
                    ],
                    captcha: [{
                            required: true,
                            message: "请输入手机验证码",
                            trigger: "blur"
                        },
                        {
                            validator: checkPhoneCode,
                            trigger: "blur"
                        },
                    ],
                },

4.methods中开始写事件

    	getloginPhoneCode() {

                // 如果没有输入手机号，则不往下执行
                if (this.loginForm.phone == "") {
                    return false;
                }

                let phone = this.loginForm.phone
                axios.get("http://localhost:3000/captcha/sent?phone=" + phone).then((res) => {
                    if (res.status != 200) {
                        return this.$message.error("验证码发送失败！");
                    } else {
                        // 当验证码发送成功，开始60秒倒计时
                        const time = 60;
                        if (!this.loginForm.timer) {
                            this.loginForm.showloginCode = false;
                            this.loginForm.count = time;
                            this.loginForm.timer = setInterval(() => {
                                if (
                                    this.loginForm.count > 0 &&
                                    this.loginForm.count <= time
                                ) {
                                    this.loginForm.count -= 1;
                                } else {
                                    this.loginForm.showloginCode = true;
                                    clearInterval(this.loginForm.timer);
                                    this.loginForm.timer = null;
                                }
                            }, 1000);
                        }
                    }
                });
            },
            handleLogin() {
                //点击登录
                axios.get('http://localhost:3000/captcha/verify', {
                    params: {

                        phone: this.loginForm.phone,
                        captcha: this.loginForm.captcha
                    }
                }).then(res => {
                    console.log(res);
                    localStorage.setItem('ele_login', true)
                    alert("成功")

                }).catch(error => {
                    console.log(error + "验证码输入错误")
                })
            },