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 相关文章推荐
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
AngularJS的ng-click传参的方法
Jun 19 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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并发访问实例代码
2012/09/06 PHP
php使用codebase生成随机数
2014/03/25 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
详解Python中的type()方法的使用
2015/05/21 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
Python控制Firefox方法总结
2019/06/03 Python
python制作简单五子棋游戏
2019/06/18 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
解决django FileFIELD的编码问题
2020/03/30 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python如何实现机器人聊天
2020/09/10 Python
python 实现aes256加密
2020/11/27 Python
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
作文评语怎么写
2014/12/25 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android