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 相关文章推荐
Jquery Ajax请求代码(2)
Jan 07 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
js字符串操作方法实例分析
May 06 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
微信小程序之购物车功能
Sep 23 Javascript
简单的网页广告特效实例
Aug 19 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
JavaScript原型式继承实现方法
Nov 06 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程序员基本要求和必备技能
2014/05/09 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
彻底理解Python中的yield关键字
2019/04/01 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python中加背景音乐如何操作
2020/07/19 Python
django有哪些好处和优点
2020/09/01 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
年级组长自我鉴定
2014/02/22 职场文书
安踏广告词改编版
2014/03/21 职场文书
数学教师求职信范文
2015/03/20 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python