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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
img标签中onerror用法
Aug 13 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
js图片轮播插件的封装
Jul 21 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
微信小程序登录换取token的教程
May 31 Javascript
一个简单的node.js界面实现方法
Jun 01 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生成扭曲及旋转的验证码图片
2013/06/07 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
读jQuery之二(两种扩展)
2011/06/11 Javascript
asm.js使用示例代码
2013/11/28 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python中dict和set的用法讲解
2019/03/28 Python
python自动识别文本编码格式代码
2019/12/26 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
浅谈Python3中print函数的换行
2020/08/05 Python
如何完美的建立一个python项目
2020/10/09 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
大学生在校学习的自我评价
2014/02/18 职场文书
文化活动实施方案
2014/03/28 职场文书
理想演讲稿范文
2014/05/21 职场文书
酒店开业策划方案
2014/06/02 职场文书
文明好少年事迹材料
2014/08/19 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
四大名著读书笔记
2015/06/25 职场文书
施工现场安全管理制度
2015/08/05 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书