vue 实现通过手机发送短信验证码注册功能


Posted in Javascript onApril 19, 2018

效果如下:

vue 实现通过手机发送短信验证码注册功能

代码如下:

template代码:

<el-main>
  <el-form 
   :model="ReginForm"
   ref="ReginForm"
   :rules="rule"
   class="regform"
   label-width="0">
   <h3 class="login-text">手机注册</h3>
    <el-form-item prop="tel">
    <el-input 
     type="text"
     v-model.number="ReginForm.tel"
     placeholder="手机号码">
    </el-input>
   </el-form-item>
    <el-form-item prop="password">
    <el-input 
     type="password"
     v-model="ReginForm.password"
     placeholder="密码">
    </el-input>
   </el-form-item>
        <div>
       <input class="auth_input" type="text" v-model="verification"  placeholder="输入验证码" />
  <span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode">获取验证码</span>
  <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒之后重新发送验证码</span> 
  </div>
   <el-form-item >
    <el-button 
     type="success" 
     class="submitBtn"
     round
     @click.native.prevent="submit"
     :loading="logining">
     注册
    </el-button>
    <hr>
    <p>已经有账号,马上去<span class="to" @click="tologin">登录</span></p>
   </el-form-item>
  </el-form>
 </el-main>
</template>

script 代码如下

export default {
 data () {
  let confirmpasswordCheck = (rule, value, callback) => {
   if (value === '') {
    return callback(new Error('密码是必须的'))
   } else {
    return callback()
   }
  }
  let telCheck = (rule, value, callback) => {
   if (value === '') {
    return callback(new Error('电话号码是必须的'))
   } else if (!Number.isInteger(value)) {
    return callback(new Error('电话号码必须是数字'))
   } else if (value.toString().length !== 11) {
    return callback(new Error('电话号码必须是11位数字'))
   } else {
    callback()
   }
  }
  return {
   ReginForm: {
    password: '',
    tel: '',
   },
   logining: false,
    sendAuthCode:true,/*布尔值,通过v-show控制显示‘获取按钮'还是‘倒计时' */
      auth_time: 0, /*倒计时 计数器*/
      verification:"",//绑定输入验证码框框
   rule: {
    password: [
     {
      required: true,
      message: '密码是必须的!',
      trigger: 'blur'
     }
    ],
    tel: [
     {
      required: true,
      validator: telCheck,
      trigger: 'blur'
     }
    ],
   }
  }
 },
 methods: {
   //  验证
     getAuthCode:function () {
      const verification =this.ReginForm.tel;
       const url = " "
       console.log("url",url);
        this.$http.get(url).then(function (response) {
         console.log("请求成功",response)
         }, function (error) {
         console.log("请求失败",error);
        })
      this.sendAuthCode = false;
     //设置倒计时秒
      this.auth_time = 10;
      var auth_timetimer = setInterval(()=>{
        this.auth_time--;
        if(this.auth_time<=0){
          this.sendAuthCode = true;
          clearInterval(auth_timetimer);
        }
      }, 1000);
    },
  // 封装注册发送请求方法
   thisAjax(){
   const passwordData=this.ReginForm.password;
   const phoneData =this.ReginForm.tel;
   const mCodeData=this.verification;
  //  手机注册
//emulateJSON:true设置后post可跨域
  const url = " 填接口"
      this.$http.post(url,{填传入的参数},{emulateJSON:true}).then(function (response) 
 {
     //登录后跳转的页面
        this.$router.push('/');
      }, function (error) {
        alert("请求失败",error);
      })
  },
  // ...
  submit () {
   this.$refs.ReginForm.validate(valid => {
    if (valid) {
     this.logining = true
      this. thisAjax();
     console.log('开始写入后台数据!')
    } else {
     console.log('submit err')
    }
   })
  },
  reset () {
   this.$refs.ReginForm.resetFields()
  },
  tologin () {
//已经注册过跳转到登入界面
   this.$router.push('/phoneLogin')
  }
 }
}
</script>

style代码如下:

.regform {
 margin: 20px auto;
 width: 310px;
 background: #fff;
 box-shadow: 0 0 10px #B4BCCC;
 padding: 30px 30px 0 30px;
 border-radius: 25px; 
}
.submitBtn {
 width: 65%;
}
.to {
 color: #FA5555;
 cursor: pointer;
}
.auth_input{
  width:140px;
  height:38px;
  margin-bottom:20px;
  border:1px solid #DCDFE6;
  /* color:red; */
  padding-left:10px;
  border-radius: 8%;
}
.regform[data-v-92def6b0]{
  width:370px;
  min-height: 440px;
}
.login-text{
 text-align: center;
 margin-bottom:20px;
}
</style>

总结

以上所述是小编给大家介绍的vue 实现通过手机发送验证码注册功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
js闭包实例汇总
Nov 09 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
详解react-redux插件入门
Apr 19 #Javascript
vuex state及mapState的基础用法详解
Apr 19 #Javascript
使用vuex的state状态对象的5种方式
Apr 19 #Javascript
react redux入门示例
Apr 19 #Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 #Javascript
使用typescript开发angular模块并发布npm包
Apr 19 #Javascript
Angular 封装并发布组件的方法示例
Apr 19 #Javascript
You might like
PHP 文件类型判断代码
2009/03/13 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python正则表达式之对号入座篇
2018/07/24 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
军训考核自我鉴定
2014/02/13 职场文书
成人继续教育实施方案
2014/03/01 职场文书
法制宣传标语
2014/06/23 职场文书
酒会邀请函
2015/01/31 职场文书
2015年环保局工作总结
2015/05/22 职场文书
Python 制作自动化翻译工具
2021/04/25 Python