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 相关文章推荐
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
js特殊字符转义介绍
Nov 05 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
layui实现三级联动效果
Jul 26 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 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
文章推荐系统(二)
2006/10/09 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP反射API示例分享
2016/10/08 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
django的csrf实现过程详解
2019/07/26 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
班子四风对照检查材料
2014/08/21 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
向女朋友道歉的话
2015/01/20 职场文书
2015年工商所工作总结
2015/05/21 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书