用VUE实现注册页（短信验证码登录）

一、实现效果图

二、实现代码

1、实现头部

<template><div class="box"><div class="box1"><span class="iconfont icon-zuojiantou back" @click="goBack"></span></div><div class="box6"><b>手机号注册</b></div></div>
</template><script>
export default {name: "Top",methods: {goBack() {this.$router.push("/Login");},},
};
</script><style scoped>
.box1 {width: 100%;height: 0.5rem;margin-bottom: 0.19rem;
}span {font-size: 0.18rem;line-height: 0.5rem;font-size: 0.2rem;
}.back {font-size: 0.25rem;
}.box6 {width: 100%;height: 0.66rem;margin: auto;
}
b {font-size: 0.24rem;font-weight: normal;
}
p {font-size: 0.13rem;color: gray;margin-top: 0.11rem;
}
</style>

2、实现注册内容

<template><div class="box"><div class="box1"><div class="phone-container"><span>+86</span><inputclass="userphone"type=""v-model="usernum"placeholder="请输入手机号码"/></div></div><div class="box2"><h3 @click="toSendCode">同意协议并注册</h3></div><div class="box3"><van-checkbox v-model="checked">已阅读并同意以下协议：<b>淘宝平台服务协议、隐私权政策、法律声明、支付宝服务协议、天翼账号认证服务条款</b></van-checkbox></div></div>
</template><script>
import axios from "axios";
import Vue from "vue";
import { Checkbox, Toast } from "vant";Vue.use(Checkbox);
Vue.use(Toast);
export default {name: "Num",data: function () {return {usernum: "",code: "",checked: false,};},methods: {// 验证手机号checkPhone(phone) {let reg = /^1[3|4|5|7|8][0-9]{9}$/;return reg.test(phone);},toSendCode() {if (this.checked) {if (this.checkPhone(this.usernum)) {axios({url: `/auth/code/?phone=${this.usernum}`,}).then((res) => {console.log(res);if (res.status == 200) {localStorage.setItem("userPhone", this.usernum);Toast("验证码发送成功");this.$router.push("/inputCode");}});} else {Toast("请检查您的手机号");}} else {Toast("请先勾选用户协议");}},},
};
</script><style scoped>
.box1 {width: 100%;height: 0.7rem;
}.box1 b {margin-top: 0.25rem;font-weight: normal;
}.phone-container {width: 100%;padding: 0.1rem 0;margin-bottom: 0.4rem;position: relative;
}
.phone-container > span {position: absolute;font-size: 0.16rem;color: #666;top: 0.21rem;
}
input {border: none;outline: none;
}input::-webkit-input-placeholder {font-size: 0.2rem;color: rgb(216, 214, 214);
}
.userphone {display: block;width: 100%;height: 0.4rem;box-sizing: border-box;padding: 0 0.3rem;padding-left: 0.4rem;font-size: 0.2rem;border-bottom: 0.01rem solid #eee;
}
.box2 {width: 100%;height: 0.5rem;margin-top: 0.2rem;
}.box2 h3 {width: 100%;height: 0.4rem;background-color: yellow;border-radius: 0.15rem;font-size: 0.18rem;text-align: center;line-height: 0.3rem;margin-top: 0.1rem;font-weight: 600;line-height: 0.4rem;letter-spacing: 0.02rem;color: rgba(87, 42, 42, 0.623);
}.box3 {width: 100%;height: 0.3rem;margin-top: 3.4rem;font-size: 0.12rem;
}.box3 b {font-weight: normal;color: deepskyblue;
}
</style>

用VUE实现注册页（短信验证码登录）相关推荐

注册刷短信验证码的问题
2019独角兽企业重金招聘Python工程师标准>>> 由于目前的项目是比较老旧的PHP代码,而且没有用到开放的一些PHP开发框架,全都是最基础的代码码起来的. 最近遇到有在刷注册的 ...
商用短链平台_第8章_ 账号微服务注册模块+短信验证码+阿里云OSS开发实战
商用短链平台_第8章_ 账号微服务注册模块+短信验证码+阿里云OSS开发实战文章目录商用短链平台_第8章_ 账号微服务注册模块+短信验证码+阿里云OSS开发实战第八章账号微服务注册模块+短信验 ...
网站注册获取短信验证码步骤
目前短信验证码的应用可以说是相当的广泛,不仅避免了大量重复注册.烂数据,提高了企业工作效率,而且在操作上也相当简单,只需要在企业现有的网站上进行短信接口对接,就可以实现短信验证码的发送. 网站注册获取 ...
2.vue3医疗在线问诊项目 - _登录模块 ==＞代码片段、css变量主题定制、cp-nav-bar组件封装、svg打包精灵图插件、cp-icon组件封装、表单校验、密码登录、短信验证码登录及两者
2.医疗在线问诊项目 - _登录模块 ==> 代码片段.css变量主题定制.cp-nav-bar组件封装.svg打包精灵图插件.cp-icon组件封装.表单校验.密码登录.短信验证码登录及两者的 ...
5.Spring Security 短信验证码登录
Spring Security 短信验证码登录在 Spring Security 添加图形验证码一节中,我们已经实现了基于 Spring Boot + Spring Security 的账号密码登录 ...
手机发送短信验证码登录完整实例
项目需求后台生成随机6位数作为验证码,发送给手机,同时将验证码存入缓存,用户登录时验证输入的验证码是否过期或者是否正确. 一.发送短信 1.了解短信发送通过发送短信的API,建立一个URL类的对象 ...
短信验证码登录，以及第三方登录
短信验证码登录首先去阿里云服务器开通短信服务功能,进入短信服务界面点击国内消息,申请一个签名和模板申请一个AccessKey,并且将短信服务的权限加入其中加入相关的依赖 <depende ...
SpringSecurity短信验证码登录
短信验证码登录时下另一种非常常见的网站登录方式为手机短信验证码登录,但Spring Security默认只提供了账号密码的登录认证逻辑,所以要实现手机短信验证码登录认证功能,我们需要模仿Spring ...
Redis(2)短信验证码登录
Redis实现短信验证码登录登录流程 1.发送验证码: 2.短信验证码登录,注册 3.校验登录状态解决状态登录刷新问题 redis指令参考:https://blog.csdn.net/weixin ...
Spring Security 短信验证码登录（5）
在Spring Security添加图形验证码中,我们已经实现了基于Spring Boot + Spring Security的账号密码登录,并集成了图形验证码功能.时下另一种非常常见的网站登录方式为 ...

用VUE实现注册页（短信验证码登录）

用VUE实现注册页（短信验证码登录）相关推荐

最新文章

热门文章