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脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
JavaScript事件委托实例分析
May 26 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
解析vue中的$mount
Dec 21 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 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
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
use jscript Create a SQL Server database
2007/06/16 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
python下载图片实现方法(超简单)
2017/07/21 Python
python 生成器协程运算实例
2017/09/04 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
python中Lambda表达式详解
2019/11/20 Python
Python map及filter函数使用方法解析
2020/08/06 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
2014全国两会心得体会
2014/03/17 职场文书
明星员工获奖感言
2014/08/14 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
团员个人年度总结
2015/02/26 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
Python实现位图分割的效果
2021/11/20 Python
Vue如何清空对象
2022/03/03 Vue.js
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang