vue+element实现手机号验证码注册的示例
很全的PC端手机端适配！一个项目多个域名我试了代理跨域本地运行可以打包上传不行，然后就用全地址，后端哪里要设置域名白名单！直接上图和完整代码！觉得可以就点个赞吧，谢谢！
代码：
<template>
<div>
<div class="register_box" v-for="img in imageList" :key="img" v-lazy:background-image="img">
<div class="icon1" onClick="window.location.href='/'">
<img src="../assets/img/register/Rectangle 61@2x.png" alt="" />
<span>51大师兄</span><br />
<span class="left_bottom">企业智囊团 专家大舞台</span>
</div>
<div class="register_box_right">
<div class="content">
<el-main>
<el-form
:model="ReginForm"
ref="ReginForm"
:rules="rule"
class="regform"
label-width="0"
>
<div class="content_text">新用户注册</div>
<div class="inputs">
<img
class="input_phone"
src="../assets/img/register/icon_phone@2x.png"
alt=""
/>
<el-form-item prop="tel" class="input">
<el-input
type="text"
v-model.number="ReginForm.tel"
placeholder="手机号码"
>
</el-input>
</el-form-item>
</div>
<div class="inputs input3">
<svg
t="1643023451870"
class="icon icon2"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2576"
>
<path
d="M225.5104 252.72832v-110.5408a30.30016 30.30016 0 0 1 30.21312-30.21312h561.98656a30.30528 30.30528 0 0 1 30.21824 30.21312v110.55104h56.3712V115.65568c0-33.23392-27.20256-60.43136-60.44672-60.43136H229.5808c-33.24416 0-60.43136 27.19744-60.43136 60.43136v137.07776h56.36096v-0.00512z m622.41792 484.21376v120.38144a30.3104 30.3104 0 0 1-30.21824 30.208H255.72352a30.30528 30.30528 0 0 1-30.21312-30.208v-120.38144H169.14944v146.91328c0 33.23392 27.19744 60.43648 60.43136 60.43648h614.272c33.23904 0 60.44672-27.19744 60.44672-60.43648v-146.91328h-56.3712zM300.47232 647.34208H243.1744V431.3344c-20.9408 19.55328-45.60896 34.02752-74.02496 43.43808V422.7584c14.9504-4.88448 31.19104-14.1824 48.73728-27.83744 17.54112-13.66528 29.568-29.60384 36.09088-47.81568h46.4896v300.2368z m319.86688-53.24288v53.25312H419.456c2.19136-20.14208 8.71424-39.20896 19.58912-57.20576 10.86464-18.0736 32.34304-41.92768 64.4352-71.7312 25.84576-24.05888 41.6512-40.38144 47.52896-48.9472 7.87456-11.81696 11.82208-23.51616 11.82208-35.08224 0-12.75904-3.44064-22.59456-10.30144-29.46048-6.8864-6.85056-16.31744-10.2912-28.43648-10.2912-11.95008 0-21.48864 3.59936-28.55936 10.78784-7.07072 7.21408-11.15648 19.17952-12.2368 35.90656L426.1888 435.6352c3.40992-31.53408 14.08-54.18496 32.01024-67.90144 17.9456-13.7472 40.38144-20.60288 67.31264-20.60288 29.50144 0 52.66944 7.936 69.5552 23.8592 16.85504 15.90272 25.28256 35.6864 25.28256 59.3408a103.40352 103.40352 0 0 1-7.25504 38.43072c-4.84352 12.17024-12.4672 24.92928-22.94784 38.25664-6.92736 8.83712-19.43552 21.53984-37.51424 38.16448-18.05824 16.55296-29.51168 27.61728-34.34496 33.01888a98.74432 98.74432 0 0 0-11.72992 15.91808h113.78176v-0.02048z m85.33504-26.09664l55.46496-6.72768c1.77664 14.14144 6.528 24.95488 14.24896 32.4096 7.77728 7.46496 17.152 11.20768 28.16 11.20768 11.83232 0 21.7856-4.50048 29.85984-13.42976 8.10496-8.99072 12.15488-21.0944 12.15488-36.31104 0-14.42304-3.88608-25.83552-11.6224-34.25792-7.75168-8.45824-17.2032-12.68224-28.34432-12.68224-7.35232 0-16.10752 1.41824-26.32192 4.28544l6.3232-46.69952c15.50336 0.40448 27.30496-2.96448 35.47648-10.09664 8.14592-7.13728 12.2368-16.60416 12.2368-28.45184 0-10.04544-2.99008-18.08896-8.93952-24.064-6.02112-5.98016-13.9776-8.96512-23.8848-8.96512-9.78432 0-18.16576 3.38432-25.09824 10.19392-6.90688 6.77888-11.11552 16.7168-12.63104 29.76256l-52.8128-8.96c3.67104-18.06336 9.22624-32.54272 16.62464-43.3664 7.424-10.78272 17.73568-19.28704 31.0016-25.46688 13.2608-6.18496 28.10368-9.27744 44.55424-9.27744 28.14464 0 50.688 8.97536 67.712 26.9312 13.9776 14.6688 20.99712 31.26272 20.99712 49.7408 0 26.24512-14.34624 47.1808-43.02848 62.81216 17.12128 3.67616 30.83264 11.91424 41.09824 24.69888 10.2656 12.77952 15.40096 28.20608 15.40096 46.27456 0 26.26048-9.59488 48.62464-28.75392 67.0976-19.16928 18.49856-43.02336 27.74528-71.58272 27.74528-27.0592 0-49.46944-7.79776-67.3024-23.33184-17.80736-15.57504-28.14464-35.94752-30.99136-61.07136z"
p-id="2577"
fill="#A1A1A1"
></path>
</svg>
<el-form-item prop="verification" class="input1">
<el-input
type="text"
v-model="ReginForm.verification"
placeholder="输入验证码"
oninput="value=value.replace(/[^\d]/g,'')"
>
</el-input>
</el-form-item>
<button
class="button_obtain"
v-show="sendAuthCode"
@click.prevent="getAuthCode"
>
获取验证码
</button>
<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="register_button"
round
@click.native.prevent="submit"
:loading="logining"
>
注册
</el-button>
</el-form-item>
<div class="permit">
<span>注册表示阅读与同意</span
><a href="#/permit" rel="external nofollow" >《软件许可及服务协议》</a><span>与</span
><a href="#/privacy" rel="external nofollow" >《用户隐私政策》</a>
</div>
</el-form>
</el-main>
</div>
</div>
</div>
</div>
</template>
<script>
import Bg from '../assets/img/register/bg@2x.png';
export default {
data() {
let code = (rule, value, callback) => {
if (value === "") {
return callback(new Error("请输入验证码"));
} else if (value.length != 4) {
return callback(new Error("输入正确4位验证码"));
} else {
return callback();
}
};
let telCheck = (rule, value, callback) => {
var reg = /^1[3-9]\d{9}$/;
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 if (!reg.test(value)) {
return callback(new Error("请输入有效的手机号码"));
} else {
callback();
}
};
return {
imageList:[Bg],
token: String,
ReginForm: {
tel: "",
verification: "",
},
logining: false,
sendAuthCode: true, //显示‘获取按钮'还是'倒计时'
auth_time: 0 /*倒计时 计数器*/,
verification: "", //绑定输入验证码框
rule: {
tel: [
{
required: true,
validator: telCheck, //手机号正则限制
trigger: "blur",
},
],
verification: [
{
required: true,
validator: code, //验证码限制
trigger: "blur",
min: 6,
max: 6,
},
],
},
};
},
created() {
const accountParam = {
account: "gongchangku",
password: "gongchangku",
};
this.$http
.post(
"https://newcp.51dsx.cn/index.php/api/user/getSysToken",
JSON.stringify(accountParam)
)
.then((data) => {
this.token = data.data.data.token;
});
},
methods: {
// 点击获取验证码
async getAuthCode() {
if (this.ReginForm.tel === "") {
this.$message.error("请输入手机号");
return;
}
const params = {
umobile: this.ReginForm.tel,
token: this.token,
};
//获取短信验证码接口
this.$http
.post(
"https://newcp.51dsx.cn/index.php/api/Sms/sendVerificationCode",
JSON.stringify(params),
{
headers: {
token: this.token,
},
}
)
.then((data) => {
if (data.data.msg === "已被注册") {
this.sendAuthCode = true;
this.$message.error("已被注册");
}
return false;
});
if (this.ReginForm.tel === "") {
this.sendAuthCode = true;
} else {
this.sendAuthCode = false;
}
//设置倒计时秒
this.auth_time = 60;
var auth_timetimer = setInterval(() => {
this.auth_time--;
if (this.auth_time <= 0) {
this.sendAuthCode = true;
clearInterval(auth_timetimer);
}
}, 1000);
},
// 封装注册发送请求方法
thisAjax() {
// 手机注册
let params = {
umobile: this.ReginForm.tel,
ucode: this.ReginForm.verification,
};
this.$http
.post(
"https://newcp.51dsx.cn/index.php/api/User/userWebRegister",
JSON.stringify(params),
{
headers: {
token: this.token,
},
}
)
.then((data) => {
if (data.data.msg === "验证码不正确") {
this.logining = false;
this.$message.error("验证码不正确");
} else {
this.$message.success("注册成功,即将跳转到首页");
window.setTimeout(this.$router.push("/"),2)
}
return false;
});
},
//点击注册
submit() {
this.$refs.ReginForm[0].validate((valid) => {
if (valid) {
this.logining = true; //转圈
this.thisAjax();
} else {
this.$message.error("填写不完整或格式错误");
}
});
},
},
};
</script>
<style lang="scss" scoped>
.icon2 {
width: 0.75rem !important;
height: 0.8rem !important;
padding: 0 !important;
margin: 0 4px 17px -4px;
color: rgb(182, 179, 179) !important;
}
.verification {
width: 25px !important;
margin-right: 5px;
}
.input_phone {
margin: 0 8px 0 2px;
}
@media (max-width: 414px) {
.icon2 {
width: 15% !important;
padding: 0 !important;
margin: 0 4px 17px 0px;
color: rgb(182, 179, 179) !important;
}
.auth_text {
font-size: 12px !important;
}
.button_obtain {
margin: -22px 0 0 6px !important;
}
.el-main {
padding: 0 !important;
}
.permit {
height: 80px !important;
}
.register_button {
height: 37px !important;
}
.button_obtain {
width: 20%;
}
.input_phone {
width: 5%;
margin-left: 4px;
margin-right: 8px;
}
.verification {
width: 16px !important;
margin: 0 6px 0 2px;
}
.icon1 {
display: none !important;
}
.register_box_right {
border-radius: 0 !important;
width: 100% !important;
height: 100% !important;
}
.content {
border-radius: 25px;
box-shadow: 0 0 10px #c1cadd;
background: #fff;
padding: 0.5rem 0.3rem 0.3rem 0.3rem;
margin: 1.555556rem auto !important;
}
.input1 {
font-size: 0.296296rem !important;
}
.button_obtain {
width: 58% !important;
font-size: 0.222222rem !important;
}
.input1 {
width: 55.5% !important;
}
.register_box_right {
background: none !important;
}
.register_box .register_box_right .content .input button {
top: -7px !important;
}
}
@media (max-width: 900px) {
.content {
width: 7.5rem !important;
}
}
@media (min-width: 1400px) {
.register_box .icon1 img {
width: 2rem !important;
}
.register_box .icon1 {
width: 5rem !important;
}
.register_box .icon1 span {
font-size: 0.444444rem !important;
}
}
.el-main {
padding: 0 !important;
}
.register_box {
position: relative;
width: 100%;
height: 100vh;
.icon1 {
display: inline-block;
width: 4rem;
margin: 0.444444rem;
padding: 0.444444rem 0;
img {
width: 1rem;
}
span {
margin-left: 0.222222rem;
font-size: 24px;
font-weight: 400;
color: #ffffff;
line-height: 16px;
}
.left_bottom {
position: absolute;
bottom: 0.8rem;
}
}
.register_box_right {
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: #ffffff;
border-radius: 0.555556rem 0px 0px 0.555556rem;
opacity: 1;
.content {
width: 8.592593rem;
height: 70%;
margin: 30vh auto;
.inputs {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
img {
margin-bottom: 21px;
}
}
.auth_text {
margin: -22px 0 0 10px;
}
.el-form-item {
width: 100% !important;
}
.content_text {
font-size: 0.518519rem;
font-weight: 600;
color: #525252;
line-height: 0.611111rem;
margin-bottom: 0.8rem;
}
.button_obtain {
margin: -22px 0 0 5px;
}
button {
height: 37px;
width: 25%;
border: none;
color: #ffffff;
background: linear-gradient(223deg, #8f99ed 0%, #b8ceef 100%);
border-radius: 0.074074rem 0.074074rem 0.074074rem 0.074074rem;
opacity: 1;
}
.register_button {
width: 100%;
height: 0.740741rem;
border-radius: 0.111111rem 0.111111rem 0.111111rem 0.111111rem;
opacity: 1;
button {
background: linear-gradient(223deg, #8f99ed 0%, #b8ceef 100%);
width: 100%;
height: 100%;
border: none;
font-size: 0.296296rem;
font-weight: 500;
color: #ffffff;
line-height: 0.351852rem;
}
}
}
.permit {
width: 100%;
height: 0.740741rem;
text-align: center;
margin-top: 0.3rem;
span {
font-size: 0.26rem;
font-weight: 500;
color: #a1a1a1;
line-height: 0.351852rem;
}
a {
font-size: 13.5px;
font-weight: 400;
color: #007aff;
line-height: 0.296296rem;
}
}
}
}
</style>
到此这篇关于vue+element实现手机号验证码注册的示例的文章就介绍到这了,更多相关element 手机号验证码注册内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
赞 (0)
相关推荐
-
Vue简易注册页面+发送验证码功能的实现示例
目录 1. 效果展示 2. 增强版验证码及邮件推送管理(见以后的博客) 3. 大致思路 4. 前期准备 5. 前端代码 6. 后端 1. 效果展示 2. 增强版验证码及邮件推送管理(见以后的博客) 3. 大致思路 用户角度分析一下注册时候的步骤: 填写自己的邮箱号 点击"发送验证码"按钮 邮箱中收到验证码 填写其余注册信息并填写验证码 注册成功! 系统设计者角度分析一下步骤: 系统随机生成六位数 根据用户提供的邮箱号将验证码发送到其邮箱 根据用户提供的信息,进行验证码的校验 如果校验成
-
vue 实现通过手机发送短信验证码注册功能
效果如下: 代码如下: template代码: <el-main> <el-form :model="ReginForm" ref="ReginForm" :rules="rule" class="regform" label-width="0"> <h3 class="login-text">手机注册</h3> <el-form-i
-
用vue实现注册页效果 vue实现短信验证码登录
本文实例为大家分享了vue实现注册页效果 的具体代码,供大家参考,具体内容如下 一.实现效果图 二.实现代码 1.实现头部 <template> <div class="box"> <div class="box1"> <span class="iconfont icon-zuojiantou back" @click="goBack"></span> <
-
vue+element实现手机号验证码注册的示例
很全的PC端手机端适配!一个项目多个域名我试了代理跨域本地运行可以打包上传不行,然后就用全地址,后端哪里要设置域名白名单!直接上图和完整代码!觉得可以就点个赞吧,谢谢! 代码: <template> <div> <div class="register_box" v-for="img in imageList" :key="img" v-lazy:background-image="img">
-
vue+element实现批量删除功能的示例
今年开始学习vue+element实现后台开发,在实现批量删除功能时有2个小知识点记录在下: 1.如何实现单击行交替选中当前行的复选框,element官网的table实例中没有找到.--通过row-click和toggleRowSelection实现 2.如何获取选中行的值来实现批量删除.--通过selection-change实现 代码如下 html: <div class="row mt30 pl15"> <el-button type="warning
-
vue+element 实现商城主题开发的示例代码
本文介绍了vue+element 实现商城主题开发的示例代码,分享给大家,具体如下: <template> <div> <div class="set-phone"> <el-form :model="theme" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item lab
-
VUE+Element实现增删改查的示例源码
前言 &最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删改查功能,想想这也不难,就做一下试试吧. 因为自己写的样式没有别人做的好,因此我想用现成的UI框架,一直也没用过Element,就干脆趁机学一下吧. 实验步骤 首先引入一下element的css以及js <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chal
-
vue+element实现动态换肤的示例代码
有时候一个项目的主题并不能满足所有人的审美,这时候换肤功能就很友好,本项目基于vue+element实现后台管理项目的换肤功能 1.创建换肤组件 <template> <el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme" :predefine="predefineColors" &g
-
封装Vue Element的table表格组件的示例详解
在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件
-
Vue+Element使用富文本编辑器的示例代码
富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用.具体截图如下: 安装编辑器组件 具体方法:npm install vue-quill-editor --save 编写组件 首先我们在components文件夹里创建ue.vue组件,效果图如下: 组件 <!-- 组件代码如下 --> <template> <div> <script id="editor"
-
利用vue + element实现表格分页和前端搜索的方法
前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统.表格.表单.树形菜单.通知等.对于搞后台管理界面的项目,特别是不需要考虑兼容ie8.ie9以下的项目.ElementUI是一个不错的选择. 而且ElementUI的文档写得十分详尽,参照demo可以很快上手. 本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.前端后台管理
-
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