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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
js刷新页面location.reload()用法详解
Dec 09 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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
php DES加密算法实例分析
2019/09/18 PHP
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
用matplotlib画等高线图详解
2017/12/14 Python
python实现简易云音乐播放器
2018/01/04 Python
Python交互环境下实现输入代码
2018/06/22 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
深入了解Python 变量作用域
2020/07/24 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
自考生毕业自我鉴定
2013/10/10 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
使用tensorflow 实现反向传播求导
2021/05/26 Python
Ruby处理CSV数据方法详解
2022/04/18 Ruby