获取手机验证码——Vant表单验证后端框架express前后端交互

完成一个获取手机验证码的功能，在获取之前要对手机号进行表单验证，判断是否输入/输入的是否为正确格式，获取手机验证码后可等待n秒重新获取，代码如下：

export default {
  name: "Login",
  components: { Tabbar, Header },
  data() {
    return {
      tel: "",
      sms: "",
      disabled: false,
      codeNum: 6,
      codeMsg: "获取短信验证码",
      userTel: [
        {
          required: true,
          message: "请输入手机号",
          trigger: "onBlur"
        },
        {
          validator: value => {
            return /^1[23456789]\d{9}$/.test(value);
          },
          message: "请输入正确格式的手机号"
        }
      ]
    };
  },
  methods: {
    ....
    // 获取短信验证码
    sendCode() {
      // 验证手机号格式是否正确
      if (!this.userTel[1].validator(this.tel)) return;
      // 禁用按钮
      this.disabled = true;
      // 倒计时
      let timer = setInterval(() => {
        --this.codeNum;
        this.codeMsg = `重新发送(${this.codeNum})`;
      }, 1000);
      // 判断什么时候停止定时器
      setInterval(() => {
        clearInterval(timer);
        this.codeNum = 6;
        this.disabled = false;
        this.codeMsg = "获取短信验证码";
      }, 6000);
    }
  }
};

后端使用node.js的框架express，短信发送可使用腾讯云短信服务

写接口可参考GitHub - qcloudsms/qcloudsms_js: qcloudsms Node.js SDK

前端发送请求

// 获取短信验证码
    sendCode() {
      // 验证手机号格式是否正确
      if (!this.userTel[1].validator(this.tel)) return;
      // 请求短信验证码接口
      http
        .$axios({
          url: "/api/code",
          method: "POST",
          data: {
            phone: this.tel
          }
        })
        .then(res => {
          if(res.success){
            this.code = res.data
          }
        });
      // 禁用按钮
      this.disabled = true;
      // 倒计时
      let timer = setInterval(() => {
        --this.codeNum;
        this.codeMsg = `重新发送(${this.codeNum})`;
      }, 1000);
      // 判断什么时候停止定时器
      setInterval(() => {
        clearInterval(timer);
        this.codeNum = 6;
        this.disabled = false;
        this.codeMsg = "获取短信验证码";
      }, 6000);
    }