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

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

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

(0)

相关推荐

  • vue实现登录页面的验证码以及验证过程解析(面向新手)

    做成之后就 是这个样子 接下来上代码 创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

  • vue实现登录验证码

    本文实例为大家分享了vue实现登录验证码的具体代码,供大家参考,具体内容如下 先来demo效果图 canvas验证码组件(可直接复制,无需改动) <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </d

  • vue实现短信验证码登录功能(流程详解)

    无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能,输入手机号,得到验证码,最后先服务器发送请求,保存登录的信息,一个必不可少的功能 思路 1,先判断手机号和验证是否为空, 2,点击发送验证码,得到验证码 3,输入的验证码是否为空和是否正确, 4,最后向服务发送请求 界面展示 1.准备工作 这个会对input进行封装处理 <template> <div class="text_group"> <div class="input_

  • vue实现手机验证码登录

    本文实例为大家分享了vue实现手机验证码登录的具体代码,供大家参考,具体内容如下 验证码 <template> <div> <el-main> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-fo

  • vue实现登录时的图片验证码

    本文实例为大家分享了vue实现登录时的图片验证码的具体代码,供大家参考,具体内容如下 效果图 一.新建vue组件components/identify/identify.vue <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></c

  • vue实现图形验证码登录

    本文实例为大家分享了vue实现图形验证码登录的具体代码,供大家参考,具体内容如下 1.效果图 2.在components下面新建文件identify.vue,内容: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas&

  • vue+springboot实现登录验证码

    本文实例为大家分享了vue+springboot实现登录验证码的具体代码,供大家参考,具体内容如下 先看效果图 在login页面添加验证码html 在后端pom文件添加kaptcha依赖 <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </depen

  • Vue实现手机号、验证码登录(60s禁用倒计时)

    最近在做一个Vue项目,前端通过手机号.验证码登录,获取验证码按钮需要设置60s倒计时(点击一次后,一分钟内不得再次点击).先看一下效果图: 输入正确格式的手机号码后,"获取验证码"按钮方可点击:点击"获取验证码"后,按钮进入60s倒计时,效果图如下: 效果图已经有了,接下来就上代码吧! html <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnD

  • Vue 实现登录界面验证码功能

    登录界面 SIdentify 创建验证码组件,实现绘画出图片验证码 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

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

    本文实例为大家分享了vue实现注册页效果 的具体代码,供大家参考,具体内容如下 一.实现效果图    二.实现代码 1.实现头部 <template> <div class="box"> <div class="box1"> <span class="iconfont icon-zuojiantou back" @click="goBack"></span> <

  • vue实现通过手机号发送短信验证码登录的示例代码

    本文主要介绍了vue实现通过手机号发送短信验证码登录的示例代码,分享给大家,具体如下: <template> <div class="get-mobile" @touchmove.prevent> <div class="main"> <div class="pt-20 pr-15 pl-15 pb-20"> <input class="input mb-15" v-mod

  • Android手机号注册、绑定手机号获取短信验证码实例

    本文写了一个常见的功能--手机app中注册或绑定手机号的获取验证码的功能,也就是短信验证功能 具体效果就是,你在注册界面填写手机号,点击获取验证码按钮,---然后会收到验证短信,填入验证码后点击注册按钮,如果验证正确就可以跳转到另外一个界面 1.首先大家需要在mob官网注册一个账号,mob是一个免费的短信验证平台 2.在mob.com后台创建应用 3.下载对应的sdk 4.将sdk作为一个library导入到你的项目中 5.现在就可以在你的项目中编写代码使用mob提供的这个功能了 具体代码如下:

  • Vue.js实现移动端短信验证码功能

    现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框,如图所示 当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值, input输入框是循环出来的,代码如下: <div class="sms_input"> <div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled=&q

  • Vue 短信验证码组件开发详解

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架--它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 摘要: 1.该组件基于Vue 2.1.X版本: 1. Vue 组件代码如下: Vue.component('timerBtn

  • vue实现短信验证码输入框

    本文实例为大家分享了vue实现短信验证码输入框的具体代码,供大家参考,具体内容如下 先上最终效果 (此处代码显示的是短信验证码框的效果   其余部分并未放上去) html <div class="code"> <input id="first" class="inputStyle" v-model="code[0]" style="border-top-left-radius: 12px; bord

  • 基于vue的短信验证码倒计时demo

    最近做了一个小的demo,分享给大家,在很多地方都能用到. 一般获取短信验证码的时候会用到这个demo: button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span

  • Android使用Kotlin和RxJava 2.×实现短信验证码倒计时效果

    本文介绍了Android使用Kotlin和RxJava 2.×实现短信验证码倒计时效果,分享给大家,具体如下: 场景:注册账号页面时,我们点击按钮发送验证码,在等待验证码时,界面会有倒计时提示,这此期间按钮不可点击.当倒计时结束时,按钮恢复. 实现代码 val timer:TextView = findViewById(R.id.textView) //这里的 timer 就是你要控制显示倒计时效果的 TextView val mSubscription: Subscription? = nul

  • php发送短信验证码完成注册功能

    短信验证码注册,很简单,用的是  云通讯的短信系统(收费的,不过有测试的api给我们做测试).好了,不多说,进入正题. 1.收到到云通讯短信系统注册账号,然后下载他们的封装好的短信api接口代码,解压,然后找到CCPRestSDK.php文件和SendTemplateSMS.php文件,将其拉到根目录文件夹里. 2.打开SendTemplateSMS.php文件,首先注意include_once('./CCPRestSDK.php'),千万别包含错路径了,将云通讯给的测试主账号,主账号Token

随机推荐