用vue实现注册页效果 vue实现短信验证码登录

 更新时间:2021年11月22日 12:20:56   作者:model-01  
这篇文章主要为大家详细介绍了用vue实现注册页,短信验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

本文实例为大家分享了vue实现注册页效果 的具体代码,供大家参考,具体内容如下

一、实现效果图

  

二、实现代码

1、实现头部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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、实现注册内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
  <div class="box">
    <div class="box1">
      <div class="phone-container">
        <span>+86</span>
        <input
          class="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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/qq_62449212/article/details/121454567

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 如何在Vue项目中应用TypeScript类

    如何在Vue项目中应用TypeScript类

    与如何在React项目中应用TypeScript类类似在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator,需要的小伙伴可续看下文具体介绍
    2021-09-09
  • 基于vue中keep-alive缓存问题的解决方法

    基于vue中keep-alive缓存问题的解决方法

    今天小编就为大家分享一篇基于vue中keep-alive缓存问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue+webpack实现懒加载过程解析

    Vue+webpack实现懒加载过程解析

    这篇文章主要介绍了Vue+webpack实现懒加载过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • vuejs对接后端踩过的坑记录

    vuejs对接后端踩过的坑记录

    这篇文章主要介绍了vuejs对接后端踩过的坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • vue自定义指令directive的使用方法

    vue自定义指令directive的使用方法

    这篇文章主要介绍了vue自定义指令directive的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue3中的watch()的用法和具体作用

    vue3中的watch()的用法和具体作用

    这篇文章主要介绍了vue3中的watch()的用法和具体作用,通过合理和熟练使用watch()方法,开发者可以更加高效地完成前端开发工作,需要的朋友可以参考下
    2023-04-04
  • 前端vue中文件下载的三种方式汇总

    前端vue中文件下载的三种方式汇总

    对于Vue中实现一般的下载功能很简单,下面这篇文章主要给大家介绍了关于前端vue中文件下载的三种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-02-02
  • 分析 Vue 中的 computed 和 watch 的区别

    分析 Vue 中的 computed 和 watch 的区别

    这篇文章分析 Vue 的 computed 和 watch 的区别,computed 用来监控自己定义的变量,页面上可直接使用。watch 是监测 Vue 实例上的数据变动,通俗地讲,就是检测 data 内声明的数据,需要的朋友可以参考一下
    2021-09-09
  • Vue使用NPM方式搭建项目

    Vue使用NPM方式搭建项目

    这篇文章主要介绍了Vue项目搭建过程,使用NPM方式搭建的,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • vue将数字转为中文大写金额方式

    vue将数字转为中文大写金额方式

    这篇文章主要介绍了vue将数字转为中文大写金额方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论