很全的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">企业智囊团&nbsp;&nbsp;专家大舞台</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"><imgclass="input_phone"src="../assets/img/register/icon_phone@2x.png"alt=""/><el-form-item prop="tel" class="input"><el-inputtype="text"v-model.number="ReginForm.tel"placeholder="手机号码"></el-input></el-form-item></div><div class="inputs input3"><svgt="1643023451870"class="icon icon2"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="2576"><pathd="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-inputtype="text"v-model="ReginForm.verification"placeholder="输入验证码"oninput="value=value.replace(/[^\d]/g,'')"></el-input></el-form-item><buttonclass="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-buttontype="success"class="register_button"round@click.native.prevent="submit":loading="logining">注册</el-button></el-form-item><div class="permit"><span>注册表示阅读与同意</span><a href="#/permit">《软件许可及服务协议》</a><span>与</span><a href="#/privacy">《用户隐私政策》</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实现手机号验证码注册相关推荐

vue+element项目手机号、邮箱校验保姆级教程
vue+element项目手机号.邮箱校验保姆级教程 (包含注意点) 先看案例:在vue+element项目中给表单中的手机号和邮箱做校验标题先说注意点 prop黄色框框起来的一定要有废话不多 ...
闲云旅游网03（基于vue+element ui）登录注册功能开发
登录功能项目GitHub地址:https://github.com/q2419068625/xianyun 新建登录注册页的布局新建了登录的表单绑定了数据到data rules表单的验证提交数 ...
js手机号验证码注册
js详细部分说明: 1.开始输入手机号, 判断手机号是否符合格式,符合格式则获取验证码及注册的按钮样式发生改变 . 2.此时点击获取验证码,向后台请求验证码,请求成功则开始验证码倒计时,否侧返回提示 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
抖音实战~手机号验证码一键注册登录流程（限制手机终端登录）
文章目录一.手机号+验证码二.前端 2.1. 点击登陆流程 2.2. 点击登录源码三.后端登录 3.1. 登录流程图 3.2. 流程简述 3.3. 手机号验证码登录流程一.手机号+验证码二. ...
vue+vant 实现手机号获取验证码页面
vue+vant 实现手机号获取验证码页面 html <van-field label="手机号"v-model="phone"centerrequir ...
VUE—移动端手机号正则验证，不正确显示‘请输入正确手机号’，若正确跳转到发送验证码（图文详情）
VUE-移动端手机号正则验证,不正确显示'请输入正确手机号',若正确跳转到发送验证码先看效果图第一步:写布局 <input type="text" placeholder ...
前端Vue实现手机号验证码登录（60s禁用倒计时）
这篇文章主要介绍了Vue实现手机号验证码登录(60s禁用倒计时),帮助大家更好的理解和使用vue,具有很好的参考价值,感兴趣的朋友可以了解下最近做了个vue项目,前端通过手机号验证码的方式登录,获取 ...
Spring Boot Vue Element入门实战(完结)
最近给朋友做一个大学运动会管理系统,用作教学案例,正好自己也在自学VUE,决定用spring boot vue做一个简单的系统.vue这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jq ...
Vue+element登录页面实现拼图验证
Vue+element登录页面实现拼图验证需求分析一.导入二.验证的意义三.常规验证手段详细设计一.使用组件二.轮子已找好,开始拼凑效果展示结尾需求分析一.导入项目开发过程中, ...

vue+element实现手机号验证码注册

很全的PC端手机端适配！一个项目多个域名我试了代理跨域本地运行可以打包上传不行，然后就用全地址，后端哪里要设置域名白名单！直接上图和完整代码！觉得可以就点个赞吧，谢谢！

代码：

vue+element实现手机号验证码注册相关推荐

最新文章

热门文章