vue实现手机验证码登录（基于娱乐系统项目）

登录逻辑：

1 验证手机号码输入框，分别判断以下情况并作出弹窗警告
(1：是否为空
(2：是否为11位数字
(3：是否是13，15, 17, 18开头的正确手机号码

2 输入框下面添加一个获取验证码的按钮，默认为关闭不可点击，
点击后，开启一个定时器setInterval，然后发送一个ajax请求给后台，把手机号传给后台，让后台去发送短信

在验证上面3种情况之后，得到为正确手机号码后
再将验证码按钮设置为可点击

3 验证验证码的输入框，分别判断以下情况并作出弹窗警告
1：是否为空
2：是否为6位数字

4 验证座位号的输入框，分别判断以下情况并作出弹窗警告
1：是否为空
2：只能字母或者数字

勾选娱乐系统安全须知

原文：https://blog.csdn.net/weixin_41818920/article/details/82290511

手机注册验证逻辑是这样的：
首先要找短信服务商如：梦网、云信使、互亿无线等等申请短信发送接口。
网站实现流程如下：
第一步：用户注册时输入手机号，网站首先要通过JS或者ajax+php验证这个号码是不是正确的手机号。
第二步：用户点击发送手机验证码，通过ajax把手机号传到php，这时php生成一个随机的验证码保存在session中，然后通过短信接口把这个验证码发送到这个手机号中。
第三步：用户输入手机收到的验证码注册。网站用session中的验证码和用户输入的验证码比较。

---

平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候,

1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击
2. 当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按钮又可以重新点击了

为了解决上面的两个问题,就需要把时间都写到localstorage里面去,当打开页面的时候,就去localstorage里面去取,
https://blog.csdn.net/qq_39581763/article/details/81739428

设置反向代理
https://blog.csdn.net/weixin_43067157/article/details/82079792?utm_source=blogxgwz0

devServer: {
    // 设置代理
    proxy: {
      '/v1': {
        target: 'http://localhost:8080/', // 域名
        ws: true, // 是否启用websockets
        changOrigin: true, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          '^/v1': '/'
        }
      }
    }
  },

---

element ui 的表单验证

H5学习之路-手机短信验证码的实现
https://blog.csdn.net/qiyongkang520/article/details/55007040
vue 实现通过手机发送验证码注册
https://www.jianshu.com/p/3a96636e7242
vue做一个有验证码的登陆页面和注册页面，敲回车登陆
https://blog.csdn.net/hani_wen/article/details/81545319
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
https://blog.csdn.net/qq_41894865/article/details/80476736

一、element ui 表单验证源码

    
        
            
手机注册
            
                
                
            
            
                
                
            
            

                
                获取验证码
                 {{auth_time}} 
                    秒之后重新发送验证码
            
            
                
                    注册
                
                

                
已经有账号，马上去登录
            
        
    


    

30s倒计时

获取验证码
 重新获取({{count}}s)

getCode() {
      const TIME_COUNT = 30
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },

二、自己写