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

 更新时间:2021-12-17 12:01:52   作者:佚名   我要评论(0)

本文实例为大家分享了vue实现注册页效果 的具体代码,供大家参考,具体内容如下
一、实现效果图
??
二、实现代码
1、实现头部


<template>

本文实例为大家分享了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>
        <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>

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

您可能感兴趣的文章:
  • vue 实现通过手机发送短信验证码注册功能
  • Vue简易注册页面+发送验证码功能的实现示例

您可能感兴趣的文章:

相关文章

  • 利用js实现简单开关灯代码

    利用js实现简单开关灯代码

    body部分: <button>开关灯</button> script部分: <script> // window.onload 是窗口加载事件,可以实现将代码写到元素
    2021-12-17
  • 用vue实现注册页效果?vue实现短信验证码登录

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

    本文实例为大家分享了vue实现注册页效果 的具体代码,供大家参考,具体内容如下 一、实现效果图 ?? 二、实现代码 1、实现头部 <template>
    2021-12-17
  • 三种方法解决ASP.NET?Core?6中的依赖项

    三种方法解决ASP.NET?Core?6中的依赖项

    依赖性注入是一种技术,它允许我们注入一个特定类的依赖对象,而不是直接创建这些实例。 使用依赖注入的好处显而易见,它通过放松模块间的耦
    2021-12-17
  • 解决父子组件通信的三种Vue插槽

    解决父子组件通信的三种Vue插槽

    目录前言环境准备Category组件App组件一、默认插槽二、具名插槽三、作用域插槽总结前言 插槽可以说是 Vue 中非常重要的一部分吧,在我学习和
    2021-12-17
  • JavaScript仿小米官网注册登录功能的实现

    JavaScript仿小米官网注册登录功能的实现

    目录首先我们需要搭建好页面布局JS功能1JS功能2JS功能3JS功能4效果图如下: 首先我们需要搭建好页面布局 html的代码如下: ? <div class=
    2021-12-17
  • vue实现手机验证码登录

    vue实现手机验证码登录

    本文实例为大家分享了vue实现手机验证码登录的具体代码,供大家参考,具体内容如下 验证码 <template> <div> <el-main> <el-f
    2021-12-17
  • 解析.netcore项目中IStartupFilter使用教程

    解析.netcore项目中IStartupFilter使用教程

    背景: netcore项目中有些服务是在通过中间件来通信的,比如orleans组件。它里面服务和客户端会指定网关和端口,我们只需要开放客户端给外界
    2021-12-17
  • ASP.NET Core设置URLs的五种方法

    ASP.NET Core设置URLs的五种方法

    目录前言URL格式前提条件方法1 使用环境变量方法2 使用命令行参数方法3 使用配置文件方法4 使用UseUrls方法5 使用Kestrel优先级总结前言 在使
    2021-12-17
  • JavaScript函数this指向问题详解

    JavaScript函数this指向问题详解

    目录一、 函数内 this 的指向1、普通函数2、构造函数3、对象方法4、事件绑定方法5、定时器函数6、立即执行函数二、改变函数内部 this 指向1、
    2021-12-17
  • JavaScript中的宏任务和微任务详情

    JavaScript中的宏任务和微任务详情

    目录1、微任务有哪些2、宏任务有哪些3、案例3.1 结论4、代码案例4.1 代码分析4.2 结论和运用的场景1、微任务有哪些 Promise await和async 2、
    2021-12-17

最新评论