前端获取验证码、手机号登录、注册功能

最新推荐文章于 2023-03-10 17:55:23 发布
最新推荐文章于 2023-03-10 17:55:23 发布
阅读量4k 收藏 42
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44621343/article/details/116870284
版权

07.前端获取验证码、手机号登录、注册功能

Register.vue

<template>
    <div class="register">
        <div class="box">
            <i class="el-icon-close" @click="close_register"></i>
            <div class="content">
                <div class="nav">
                    <span class="active">新用户注册</span>
                </div>
                <el-form>
                    <el-input
                            placeholder="手机号"
                            prefix-icon="el-icon-phone-outline"
                            v-model="mobile"
                            clearable
                            @blur="check_mobile">
                    </el-input>
                    <el-input
                            placeholder="密码"
                            prefix-icon="el-icon-key"
                            v-model="password"
                            clearable
                            show-password>
                    </el-input>
                    <el-input
                            placeholder="验证码"
                            prefix-icon="el-icon-chat-line-round"
                            v-model="sms"
                            clearable>
                        <template slot="append">
                            <span class="sms" @click="send_sms">{{ sms_interval }}</span>
                        </template>
                    </el-input>
                    <el-button type="primary" @click="register">注册</el-button>
                </el-form>
                <div class="foot">
                    <span @click="go_login">立即登录</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Register",
        data() {
            return {
                mobile: '',
                password: '',
                sms: '',
                sms_interval: '获取验证码',
                is_send: false,
            }
        },
        methods: {
            close_register() {
                this.$emit('close', false)
            },
            go_login() {
                this.$emit('go')
            },
            check_mobile() {
                if (!this.mobile) return;
                if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
                    this.$message({
                        message: '手机号有误',
                        type: 'warning',
                        duration: 1000,
                        onClose: () => {
                            this.mobile = '';
                        }
                    });
                    return false;
                }
                this.is_send = true;


                //校验手机号如果存在就不用注册，直接去登录
                this.$http.get(this.$BASE_URL + 'user/check_phone/', {params: {phone: this.mobile}}).then(res => {
                    console.log(res.data)
                    if (res.data.code == 100) {
                        this.is_send = false;

                        this.$message({
                            message: '该账号已经存在，请直接去登录',
                            type: 'success',
                        })
                        this.is_send = true;
                    } else {
                        this.is_send = true;
                        this.$message({
                            message: '可以正常注册',
                            type: 'warning',
                        })
                    }
                })
            },
            register() {
                if(!(this.mobile &&this.sms && this.password)){
                    this.$message({
                            message: '手机号，验证码，密码不能为空',
                            type: 'error',
                        })
                    return
                }
                this.$http.post(this.$BASE_URL + 'user/register/', {
                    mobile: this.mobile,
                    code: this.sms,
                    password: this.password
                }).then(res => {
                    if (res.data.code == 100) {
                        this.$message({
                            message: '注册成功，请去登录',
                            type: 'success',
                        })
                        //关掉注册框，打开登录框
                        this.go_login()
                    } else {
                        this.$message({
                            message: '注册失败，请稍后再试',
                            type: 'error',
                        })
                    }
                })

            },
            send_sms() {
                if (!this.is_send) return;
                this.is_send = false;
                let sms_interval_time = 60;
                this.sms_interval = "发送中...";
                let timer = setInterval(() => {
                    if (sms_interval_time <= 1) {
                        clearInterval(timer);
                        this.sms_interval = "获取验证码";
                        this.is_send = true; // 重新回复点击发送功能的条件
                    } else {
                        sms_interval_time -= 1;
                        this.sms_interval = `${sms_interval_time}秒后再发`;
                    }
                }, 1000);

                this.$http.get(this.$BASE_URL + 'user/send_sms/?phone=' + this.mobile).then(res => {
                    console.log(res.data)
                    if (res.data.code == 100) {
                        this.$message({
                            message: '短信发送成功',
                            type: 'success',
                        })
                    } else {
                        this.$message({
                            message: '短信发送失败，请稍后再试。。。',
                            type: 'error',
                        })
                    }
                })


            }
        }
    }
</script>

<style scoped>
    .register {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .box {
        width: 400px;
        height: 480px;
        background-color: white;
        border-radius: 10px;
        position: relative;
        top: calc(50vh - 240px);
        left: calc(50vw - 200px);
    }

    .el-icon-close {
        position: absolute;
        font-weight: bold;
        font-size: 20px;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .el-icon-close:hover {
        color: darkred;
    }

    .content {
        position: absolute;
        top: 40px;
        width: 280px;
        left: 60px;
    }

    .nav {
        font-size: 20px;
        height: 38px;
        border-bottom: 2px solid darkgrey;
    }

    .nav > span {
        margin-left: 90px;
        color: darkgrey;
        user-select: none;
        cursor: pointer;
        padding-bottom: 10px;
        border-bottom: 2px solid darkgrey;
    }

    .nav > span.active {
        color: black;
        border-bottom: 3px solid black;
        padding-bottom: 9px;
    }

    .el-input, .el-button {
        margin-top: 40px;
    }

    .el-button {
        width: 100%;
        font-size: 18px;
    }

    .foot > span {
        float: right;
        margin-top: 20px;
        color: orange;
        cursor: pointer;
    }

    .sms {
        color: orange;
        cursor: pointer;
        display: inline-block;
        width: 70px;
        text-align: center;
        user-select: none;
    }
</style>

Login.vue

<template>
    <div class="login">
        <div class="box">
            <i class="el-icon-close" @click="close_login"></i>
            <div class="content">
                <div class="nav">
                    <span :class="{active: login_method === 'is_pwd'}"
                          @click="change_login_method('is_pwd')">密码登录</span>
                    <span :class="{active: login_method === 'is_sms'}"
                          @click="change_login_method('is_sms')">短信登录</span>
                </div>
                <el-form v-if="login_method === 'is_pwd'">
                    <el-input
                            placeholder="用户名/手机号/邮箱"
                            prefix-icon="el-icon-user"
                            v-model="username"
                            clearable>
                    </el-input>
                    <el-input
                            placeholder="密码"
                            prefix-icon="el-icon-key"
                            v-model="password"
                            clearable
                            show-password>
                    </el-input>
                    <el-button type="primary" @click="pwd_login">登录</el-button>
                </el-form>
                <el-form v-if="login_method === 'is_sms'">
                    <el-input
                            placeholder="手机号"
                            prefix-icon="el-icon-phone-outline"
                            v-model="mobile"
                            clearable
                            @blur="check_mobile">
                    </el-input>
                    <el-input
                            placeholder="验证码"
                            prefix-icon="el-icon-chat-line-round"
                            v-model="sms"
                            clearable>
                        <template slot="append">
                            <span class="sms" @click="send_sms">{{ sms_interval }}</span>
                        </template>
                    </el-input>
                    <el-button type="primary" @click="phone_login">登录</el-button>
                </el-form>
                <div class="foot">
                    <span @click="go_register">立即注册</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                username: '',
                password: '',
                mobile: '',
                sms: '',
                login_method: 'is_pwd',
                sms_interval: '获取验证码',
                is_send: false,
            }
        },
        methods: {
            close_login() {
                this.$emit('close')
            },
            go_register() {
                this.$emit('go')
            },

            //密码登录方法
            pwd_login() {
                if (!(this.username && this.password)) {
                    //用户名或密文为空
                    this.$message({
                        message: '用户名或密码不能为空',
                        type: 'warning'
                    });

                } else {
                    //发送axios请求
                    this.$http.post(this.$BASE_URL + 'user/login/', {
                        username: this.username,
                        password: this.password
                    }).then(res => {
                        console.log(res)
                        if (res.data.code == 100) {
                            //登录成功

                            //1 存储返回的token，username（可以存的地方有三个）
                            //咱们放到cookie中(放到cookie中)
                            this.$cookies.set('token', res.data.token, '7d')
                            this.$cookies.set('username', res.data.username, '7d')
                            // sessionStorage.setItem()
                            // sessionStorage.getItem()
                            // localStorage.setItem()
                            // localStorage.getItem()
                            //2 销毁框
                            this.close_login()


                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                    })
                }

            },

            //手机号登录
            phone_login() {
                if (!(this.mobile && this.sms)) {
                    //用户名或密文为空
                    this.$message({
                        message: '手机号或验证码不能为空',
                        type: 'warning'
                    });

                } else {
                    //发送axios请求
                    this.$http.post(this.$BASE_URL + 'user/login_phone/', {
                        mobile: this.mobile,
                        code: this.sms
                    }).then(res => {
                        console.log(res)
                        if (res.data.code == 100) {
                            //登录成功
                            this.$cookies.set('token', res.data.token, '7d')
                            this.$cookies.set('username', res.data.username, '7d')
                            this.close_login()

                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                    })
                }

            },
            change_login_method(method) {
                this.login_method = method;
            },
            check_mobile() {
                if (!this.mobile) return;  //如果手机号没填，这个方法结束了
                //js的正则   字符串.match('/正则表达式/')
                if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
                    this.$message({
                        message: '手机号有误',
                        type: 'warning',
                        duration: 1000,  //message的显示时间
                        onClose: () => {
                            this.mobile = '';  //把手机号清空
                        },

                    });
                    return false;
                }

                //前端输入的手机号是正确手机号，去后端，查看手机号是否存在

                // this.$http.get(this.$BASE_URL+'user/check_phone/?phone='+this.mobile)
                this.$http.get(this.$BASE_URL + 'user/check_phone/', {params: {phone: this.mobile}}).then(res => {
                    console.log(res.data)
                    if (res.data.code == 100) {
                        //正常的,可以发送验证码，如果点击发送验证码按钮，就能点击，否则为false，就不能点击
                        this.$message({
                            message: '该手机可以发送验证码',
                            type: 'success',
                        })
                        this.is_send = true;
                    } else {
                        this.is_send = false;
                        this.mobile = ''
                        this.$message({
                            message: res.data.msg,
                            type: 'warning',
                        })
                    }
                })


            },
            send_sms() {

                if (!this.is_send) return;
                this.is_send = false;
                let sms_interval_time = 60;
                this.sms_interval = "发送中...";
                let timer = setInterval(() => {
                    if (sms_interval_time <= 1) {
                        clearInterval(timer);
                        this.sms_interval = "获取验证码";
                        this.is_send = true; // 重新回复点击发送功能的条件
                    } else {
                        sms_interval_time -= 1;
                        this.sms_interval = `${sms_interval_time}秒后再发`;
                    }
                }, 1000);
                //向后端发送短信接口发请求，给这个手机号发短信
                this.$http.get(this.$BASE_URL + 'user/send_sms/?phone=' + this.mobile).then(res => {
                    console.log(res.data)
                    if (res.data.code == 100) {
                        this.$message({
                            message: '短信发送成功',
                            type: 'success',
                        })
                    } else {
                        this.$message({
                            message: '短信发送失败，请稍后再试。。。',
                            type: 'error',
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .login {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .box {
        width: 400px;
        height: 420px;
        background-color: white;
        border-radius: 10px;
        position: relative;
        top: calc(50vh - 210px);
        left: calc(50vw - 200px);
    }

    .el-icon-close {
        position: absolute;
        font-weight: bold;
        font-size: 20px;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .el-icon-close:hover {
        color: darkred;
    }

    .content {
        position: absolute;
        top: 40px;
        width: 280px;
        left: 60px;
    }

    .nav {
        font-size: 20px;
        height: 38px;
        border-bottom: 2px solid darkgrey;
    }

    .nav > span {
        margin: 0 20px 0 35px;
        color: darkgrey;
        user-select: none;
        cursor: pointer;
        padding-bottom: 10px;
        border-bottom: 2px solid darkgrey;
    }

    .nav > span.active {
        color: black;
        border-bottom: 3px solid black;
        padding-bottom: 9px;
    }

    .el-input, .el-button {
        margin-top: 40px;
    }

    .el-button {
        width: 100%;
        font-size: 18px;
    }

    .foot > span {
        float: right;
        margin-top: 20px;
        color: orange;
        cursor: pointer;
    }

    .sms {
        color: orange;
        cursor: pointer;
        display: inline-block;
        width: 70px;
        text-align: center;
        user-select: none;
    }
</style>
贾维斯Echo
关注
  • 5
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
js实现登录注册框手机号和验证码校验（前端部分）
10-19
主要为大家详细介绍了js实现登录注册框手机号和验证码校验的前端部分代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery输入手机号码获取验证码表单代码
06-10
在开发手机移动端网页时，表单验证和交互体验是至关重要的元素，特别是在涉及用户注册或登录功能时。"jQuery输入手机号码获取验证码表单代码"就是这样一个解决方案，它结合了美观的界面设计与实用的前端功能，使得...
第53章 短信验证服务和登录的前端定义实现
zhoujian_911的专栏
03-04 3563
async postSmsValidate() { if (this.loginSmsForm.phone == '') { this.$refs.refPhoneRequired.focus(); this.$message.error('必须先输入手机号!'); } else { let phone = this.loginSmsForm.phone; let res = await postSmsValidateCreate(JSON.str
网站、手机验证码开发（手机注册验证）
若先设计
07-26 9808
第一步：用户注册时输入手机号，网站首先要通过JS或者ajax+php验证这个号码是不是正确的手机号。 第二步：用户点击发送手机验证码，通过ajax把手机号传到php，这时php生成一个随机的验证码保存在session中，然后通过短信接口把这个验证码发送到这个手机号中。 第三步：用户输入手机收到的验证码注册。网站用session中的验证码和用户输入的验证码比较。 这里使用的是中国网建的短信
前端注册验证码校验
weixin_34290096的博客
11-28 657
2019独角兽企业重金招聘Python工程师标准>>> ...
前端通用内容汇总-注册-邮箱+验证码
大师兄
04-06 889
原文地址:https://dsx2016.com/?p=366 ➢ 邮箱+密码 这种方式的便捷性仅次于手机号. 为了验证本人所有,一般会发送一封验证邮件. 密码在注册的时候就必不可少,通常需要再次确认密码. 后续也可以通过邮箱找回密码和重置密码. ➢ 用户名+邮箱+密码 有时候也会同时设置用户名,后续可以用户名或者邮箱登录. 不设置用户名的话可以随机生成一个名称. ➢...
vue 实现通过手机发送短信验证码注册功能
08-27
本文中，我们使用了一个名为 `ReginForm` 的组件，该组件包含了注册表单的所有元素，包括手机号码、密码、验证码输入框、获取验证码按钮和注册按钮。模板是 Vue 组件的视图部分，我们使用了 HTML 语法编写模板，并...
vue3 纯前端 验证码功能
最新发布
11-14
vue3 纯前端 验证码功能
HTML5手机绑定获取验证码特效特效代码
03-20
HTML5手机绑定获取验证码特效是现代移动应用中不可或缺的一个功能，尤其在用户注册、账号安全设置等场景下，用于验证用户手机号的真实性。这个特效代码专为手机移动端设计，旨在提供流畅且用户友好的体验。 首先，...
jQuery手机端获取验证码页面特效
04-09
- 输入手机号时，可以提供自动补全或格式化功能，例如添加国家区号选择。 - 确保按钮的禁用/启用状态与当前流程一致，防止用户困惑。 - 如果网络延迟，显示加载指示器以告知用户正在处理请求。 以上就是使用...
编写手机验证注册接口
Kevincy_ximo的博客
10-06 481
1.编写注册接口 1.1 user/urls.py 中添加路由 urlpatterns = [ path('register/', views.RegisterView.as_view()), # 注册视图, /user/register/ ] 1.2 user/view.py 中写注册视图函数 class RegisterView(APIView): """ 用户注册, 权限是: 匿名用户可访问 """ # 自定义权限类 permission_classes
Vue简易注册页面+发送验证码功能的实现
热门推荐
建桥之魂的博客
11-27 3万+
目录1. 效果展示2. 增强版验证码及邮件推送管理（见以后的博客）3. 大致思路4. 前期准备5. 前端代码6. 后端① 主要的依赖② 正则校验邮箱工具类③ Redis的set和get工具类④ 核心service层代码 1. 效果展示 2. 增强版验证码及邮件推送管理（见以后的博客） 3. 大致思路 用户角度分析一下注册时候的步骤： 填写自己的邮箱号 点击“发送验证码”按钮 邮箱中收到验证码 填写其余注册信息并填写验证码 注册成功！ 系统设计者角度分析一下步骤： 系统随机生成六位数 根据用户提
【SDU项目实训2019级】前端设计——注册界面，向后端发送获取验证码请求，后端存储验证码到redis，实现注册功能
李小恩恩子的博客
06-03 452
①用户填写用户名、密码、手机号 ②点击获取验证码，前端判断以及向后端发送获取验证码请求 ③发送验证码 ④用户填写验证码，点击立即注册，前端向后端发送注册请求 ⑤后端验证+完成注册，保存用户信息至数据库，添加用户登录状态信息，返回结果...
js手机号验证码注册
weixin_45080962的博客
04-06 867
js详细部分 说明： 1.开始输入手机号， 判断手机号是否符合格式，符合格式则获取验证码及注册的按钮样式发生改变 。 2.此时点击获取验证码，向后台请求验证码，请求成功则开始验证码倒计时，否侧返回提示信息。 3.最后输入手机验证码，点击注册按钮， 判断手机号验证码是否填写， 如果填写请求后台url提交信息 否则返回提示信息。 /* 微信注册页面 */ window.onloa...
web前端页面账号密码登录加验证码生成和校验功能
樂小伍
09-16 4842
参考 hutool 工具：https://www.hutool.club 使用需要下载 jar 包放入工程下的 lib 中： https://repo1.maven.org/maven2/cn/hutool/hutool-all/4.6.5/hutool-all-4.6.5.jar /////////////////////////////////////////////////////////...
【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面，路由式开发（附完整代码）
TIG_JS的博客
03-10 8159
Vue2+elementUI编写一个手机号验证码登录页面，路由式开发，正则判断手机号格式是否正确
前端Vue实现手机号验证码登录（60s禁用倒计时）
Lguorong的博客
08-18 4465
这篇文章主要介绍了Vue实现手机号验证码登录（60s禁用倒计时），帮助大家更好的理解和使用vue，具有很好的参考价值，感兴趣的朋友可以了解下。最近做了个vue项目，前端通过手机号验证码的方式登录，获取验证码的按钮需要倒计时，点击一次之后，60秒内不能再次点击。输入正确格式的手机号码后，“获取验证码” 按钮方可点击；...
web前端注册界面
weixin_62880319的博客
12-28 3603
前端注册页面
安卓开发手机号验证码登录功能
05-31
要实现手机号验证码登录功能，可以按照以下步骤进行： 1. 在布局文件中添加手机号和验证码输入框以及获取验证码和登录按钮。 2. 在后台服务器端生成验证码，并将验证码存储到数据库中。 3. 在前端获取到用户输入的手机号和验证码，将其发送到后台服务器进行验证。 4. 后台服务器接收到前端发送的数据后，从数据库中获取对应手机号的验证码进行比对。 5. 如果验证码验证成功，则将用户信息存储到服务器端的 session 中，并返回登录成功的信息给前端。 6. 前端接收到登录成功的信息后，进行页面跳转或其他操作。 在具体实现的过程中，需要涉及到 Android 前端和后台服务器端的开发，以及数据库的设计和操作等方面的知识。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贾维斯Echo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值