前端Vue自定义注册界面模版 手机号邮箱账号输入框 验证码输入框 包含手机号邮箱账号验证

已于 2023-10-19 08:40:51 修改
阅读量1.2k 收藏 3
点赞数 1
文章标签： vue.js 前端 javascript ecmascript 前端框架 uni-app html5
于 2023-07-02 09:09:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenchuang0128/article/details/131497935
版权

前端Vue组件化开发：自定义注册界面模版的实践与优化

随着前端开发技术的不断发展，组件化开发已经成为一种趋势。组件化开发可以将一个复杂的Web应用程序拆分为一系列可重复使用的组件，从而实现单独开发、测试和维护。这不仅提高了开发效率，还降低了维护成本。本文将介绍一款基于Vue的前端自定义注册界面模版组件的设计与实现，并探讨如何对其进行优化。

一、技术背景和市场需求

在前端开发中，传统的开发方式将一个系统做成了整块应用，一个小小的改动或一个小功能的增加都可能引起整体逻辑的修改，导致牵一发而动全身。为了解决这个问题，引入了组件化开发的概念。组件化开发可以将应用程序拆分为一系列可重复使用的组件，每个组件可以单独开发、测试和维护，大大提高了开发效率和可维护性。

在前端应用中，注册界面是一个常见的功能模块，具有广泛的应用场景。通过组件化开发，我们可以将注册界面封装为一个可重复使用的组件，提高开发效率，降低维护成本。

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发

 

d848d5658a07453c843277846948c608.png

d848d5658a07453c843277846948c608.png

效果图如下：

format,png

 

二、技术实现

  1. 设计思路

自定义注册界面模版组件的设计思路是，提供一个包含手机号、邮箱账号和验证码输入框的注册界面，并实现相应的验证功能。通过结合Vue框架的特性，我们可以实现这一功能。

  1. 关键技术

自定义注册界面模版组件的实现主要使用了Vue框架的特性，包括Vue实例、Vue组件、Vue指令等。具体实现如下：

（1）创建一个Vue实例，用于管理组件的状态和行为。

（2）创建一个Vue组件，用于实现注册界面的逻辑和界面。

（3）使用v-model指令来实现输入框数据的双向绑定和验证。

（4）使用正则表达式来实现手机号和邮箱账号的验证。

（5）使用定时器来实现验证码的倒计时功能。

  1. 代码实现
<template>
    <view class="page">

        <view class="title">注册/忘记密码</view>
        <view class="input_box"><input type="text" v-model="email" placeholder="请输入邮箱账号" /></view>
        <view class="input_box">
            <input type="number" v-model="code" placeholder="请输入验证码" />
            <button @click="getCode">{{codeText}}</button>
        </view>
        <view class="input_box"><input password v-model="password" placeholder="请输入密码" /></view>
        <view class="input_box"><input password v-model="confirmPassword" placeholder="请确认密码" /></view>
        <view class="input_box"><input type="text" v-model="recommendCode" placeholder="推荐码（非必填）" @confirm="" />
        </view>
        <view class="protocol_box">
            <view class="select" :class="{active: agree}" @click="agree = !agree"></view>
            我已同意
            <text @click="onPageJump('/pages/user/protocol')">《用户注册协议》</text>
            和
            <text @click="onPageJump('/pages/user/protocol')">《隐私协议》</text>
        </view>
        <view class="btn_box"><button @click="">注册</button></view>
    </view>
</template>

<script>
    import md5 from '@/config/md5';

    var clear;
    export default {
        data() {
            return {
                //邮箱
                email: '',
                // 密码
                password: '',
                //验证码
                code: '',
                //确认密码
                confirmPassword: '',
                // 推荐码
                recommendCode: "",
                //验证码
                codeText: '获取验证码',
                //验证码已发
                readonly: false,
                agree: false,
            };
        },
        //第一次加载
        (e) {},
        //页面显示
        onShow() {},
        //方法
        methods: {
            onJumpPage(url) {
                uni.navigateTo({
                    url: url
                });
            },
            //获取验证码
            getCode() {
                if (this.readonly) {
                    uni.showToast({
                        title: '验证码已发送',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.email) {
                    uni.showToast({
                        title: '请输入邮箱',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.$base.mailRegular.test(this.email)) {
                    uni.showToast({
                        title: '请输入正确的邮箱',
                        icon: 'none'
                    });
                    return;
                }

                this.getCodeState();
            },
            //验证码按钮文字状态
            getCodeState() {
                const _this = this;
                this.readonly = true;
                this.codeText = '60S后重新获取';
                var s = 60;
                clear = setInterval(() => {
                    s--;
                    _this.codeText = s + 'S后重新获取';
                    if (s <= 0) {
                        clearInterval(clear);
                        _this.codeText = '获取验证码';
                        _this.readonly = false;
                    }
                }, 1000);
            },
            () {
                if (!this.agree) {
                    uni.showToast({
                        title: '请先同意《用户协议》和《隐私协议》',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.email) {
                    uni.showToast({
                        title: '请输入邮箱',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.$base.mailRegular.test(this.email)) {
                    uni.showToast({
                        title: '请输入正确的邮箱',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.code) {
                    uni.showToast({
                        title: '请输入验证码',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.password) {
                    uni.showToast({
                        title: '请输入密码',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.confirmPassword) {
                    uni.showToast({
                        title: '请输入确认密码',
                        icon: 'none'
                    });
                    return;
                }
                if (this.confirmPassword != this.password) {
                    uni.showToast({
                        title: '两次密码不一致',
                        icon: 'none'
                    });
                    return;
                }
                let httpData = {
                    email: this.email,
                    code: this.code,
                    password: md5(this.password),
                };
                if (this.recommendCode) {
                    httpData.recommendCode = this.recommendCode;
                }

            },
            //页面隐藏
            onHide() {},
            //页面卸载
            onUnload() {},
            //页面下来刷新
            onPullDownRefresh() {},
            //页面上拉触底
            onReachBottom() {},

        },
    }
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';

    .page {
        background-color: #FFF;
        padding: 0 56rpx;
        min-height: 100vh;

        .title {
            padding: 28rpx 0 20rpx 0;
            font-size: 52rpx;
            color: #333333;
        }

        .input_box {
            display: flex;
            justify-content: space-between;
            height: 100rpx;
            padding-top: 20rpx;
            border-bottom: 1rpx solid #eeeeee;

            input {
                flex: 1;
                height: 80rpx;
                line-height: 80rpx;
                font-size: 30rpx;
            }

            button {
                height: 78rpx;
                line-height: 78rpx;
                font-size: 30rpx;
                color: $themeColor;

                &:active {
                    background-color: transparent;
                }
            }
        }

        .btn_box {
            margin-top: 40rpx;

            button {
                font-size: 32rpx;
                @include theme('btn_bg') color: #fff;
                height: 100rpx;
                line-height: 100rpx;
                border-radius: 8rpx;
            }
        }

        .protocol_box {
            margin-top: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            font-size: 28rpx;
            color: #333333;

            .select {
                width: 36rpx;
                height: 36rpx;
                background-image: url("../../static/icon/ic_gender_unselected.png");
                background-position: center center;
                background-repeat: no-repeat;
                background-size: 100% auto;
                margin-right: 15rpx;

                &.active {
                    background-image: url("../../static/icon/ic_agreed.png");
                }
            }

            >text {
                color: $themeColor;
            }
        }
    }
</style>

三、性能优化

  1. 缓存处理：对于频繁使用的注册界面组件，可以使用本地存储或者内存缓存来减少请求次数和加载时间。
  2. 异步处理：对于需要异步加载的数据，可以使用Promise或者async/await来实现异步操作，提高页面响应速度。
  3. 代码优化：对于复杂的业务逻辑和数据处理，可以通过代码重构和优化来减少代码量、提高代码质量和执行效率。
  4. 性能监控：通过性能监控工具来监控页面性能，及时发现和解决性能问题。

四、应用场景和优势分析

  1. 应用场景：适用于任何需要提供注册界面的Web应用程序，特别是对于业务场景复杂、需要多次迭代的产品来说更为实用。
  2. 优势分析：通过使用自定义注册界面模版组件，可以大大提高开发效率，降低维护成本。同时，该组件还具有灵活性和可复用性等优点，可以轻松地与其他组件进行组合和扩展。此外，该组件还包含了手机号、邮箱账号和验证码的验证功能，提高了用户注册的安全性和可靠性。

 

 

 

前端组件开发
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JS手机号码输入框特效.zip
07-05
JS手机号码输入框特效
绑定手机号-VUE模板 UNIAPP模板 布局、样式、JS分离
04-22
4. **立即登录**：当用户输入正确的验证码后，点击“立即登录”按钮，会向服务器发送验证请求，包括手机号和验证码。验证通过后，用户会被视为登录成功，可能跳转到主界面或执行其他操作。 在这个项目中，我们看到...
Project1_03_Redis+SpringBoot+Vue===＞邮箱注册登录+短信注册登录
qq_41368113的博客
07-04 348
一、项目环境 前端页面：Vue Project SDK：JDK1.8 IDEA 2019 SQLyog VMWare Workstation Pro MobaXterm RedisDesktopManager 二、项目演示 项目源码：salieri_login02 项目参考：狂神说_阿里云短信业务实战；乐字节_SpringBoot注册登录；不良人_前后端分离的员工管理系统；不良人_Vue全家桶；尚硅谷_Redis6教程 项目运行注意事项：同Project01 项目运行过程： 图1 项目运行过程
好看的vue登录页面(附 源代码 背景图)
最新发布
2302_77426533的博客
06-17 948
confirm（）函数为后台校验相关代码。
Vue注册界面精美模板分享
罗铠威的博客
05-30 2356
本篇博客主要提供vue组件之注册组件源码，需要的朋友请自取这里是网址图像联网会显示，圆角头像（可以自己更换）这里是登陆背景网址图像，联网会显示，可以自行更换。
vue实现登录注册模板
热门推荐
11-11 2万+
模板1： login.vue <template> <p class="login"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="登录" name="first"> <el-form :model="ru...
VUE登录注册页面,完整vue，直接复制
good_good_study5的博客
02-01 1万+
VUE登录注册页面，直接复制全部
注册页实现激活邮箱验证
wangjingjing1014的专栏
04-25 1935
-----------注册页前台             .zhuyi {     color:Red;     font-size:small;     }     #pwd-strong { float: left; margin: 0px; padding: 0px; list-style: none; background-image: url
vue 实现通过手机发送短信验证码注册功能
08-27
Vue 实现通过手机发送短信验证码注册功能 ...本文介绍了如何使用 Vue 和 Vuex 实现通过手机发送短信验证码注册功能，涵盖了组件、模板、表单验证、Vuex 状态管理、短信验证码发送、倒计时功能和验证码输入框等知识点。
vue网站后台登录注册和忘记密码切换页
07-13
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。在这个项目中，“vue网站后台登录注册和忘记密码切换页”指的是使用Vue.js实现的网站后台功能，包括用户登录、注册以及找回密码的页面。由于描述中提到...
Vue.js实现移动端短信验证码功能
10-20
它发送一个POST请求到'signin'接口，包含手机号`mobile`和验证码`captcha`，成功后跳转到'/main'页面。 `sms_input`方法处理键盘事件。如果按下的是退格键（8），则减少`position`，移除最后一个输入的数字。如果...
Vue实现简易邮箱输入验证
01-20
本文中的代码将使用自定义全局组件，emit派发以及正则来实现一个简易的邮箱输入验证功能，用以验证邮箱地址格式是否正确，如果正确则在输入框的后方同步显示true，如果错误则显示false。 邮箱地址我们规定为： 前缀是字母、数字或者下划线，并且长度在3位以上15位以下，后缀是小写字母构成，且长度为2位或者3位。 例如：ab@152.cn                false（前缀不在3位以上）            sbd1221@163.com     true   下面为代码，已含适量注释： {{mail}} Vue.component('cu
Vue版 Web后台页面模板
12-25
这套源码是Vue+Node.js+H5页面，后台模板页面，希望能帮到有需要的人。
基于vue的移动端的商城，很全，购物车，登录注册，短信验证，
10-05
基于vue，新手必备项目，结构布局，都有很好的借鉴，购购物车动画，登录拦截都做了处理，
vue-phone-number-input：使用Vue JS进行的电话号码输入（格式和有效电话号码）
02-06
电话号码输入 一个漂亮的文本字段，用于格式化VueJS制作的电话号码 我的新图书馆的新版本： 新版本的VuePhoneNumberInput现在在我的新库 参见doc / demo页面 某些选项可能会更改，请使用右上角的按钮查看道具文档 在这个新的库中，您可以使用相同的样式享受其他许多组件。 您可以仅安装所需的组件（而不是整个库），为此，请阅读“页面。 如果您有任何问题，请随时问我！ 演示版 安装 使用纱 yarn add vue-phone-number-input 使用npm npm i --save vue-phone-number-input 用法 ES6模块/ Commo
4款登陆页面模版
09-05
精美登陆页面！ 博客：http://blog.csdn.net/ajlgl?viewmode=contents 资源：http://download.csdn.net/user/ajlgl/uploads 百度云：https://pan.baidu.com/s/1dESLQY9
vue 实现用户登录方式的切换功能
10-15
在实际应用中，还需要处理更复杂的逻辑，如发送验证码、验证用户输入、错误提示等。这通常涉及到methods、computed属性以及可能的axios请求来与服务器交互。但上述代码已经展示了基本的界面切换逻辑，开发者可以根据...
vue登录注册(移动端)
m0_53912016的博客
05-08 1653
登录注册 效果图 代码
Vue3 注册和
m0_60779315的博客
01-16 512
PascalCase />更明显的是，这是一个 Vue 组件，而不是模板中的原生 HTML 元素。如果您全局注册了一个组件，但最终没有在应用中的任何位置使用它，则该组件仍将包含在最终捆绑包中。只能侦听直接子组件发出的事件。对于对象中的每个属性，键将是组件的注册名称，而值将包含组件的实现。如果在选项中定义了本机事件（例如，），则侦听器现在将仅侦听组件发出的事件，不再响应本机事件。为了添加验证，为事件分配了一个函数，该函数接收传递给 this.$emit 的参数调用并返回一个布尔值，以指示事件是否有效。
vue实现注册表单验证包含邮箱，手机号，密码，确认密码
06-02
好的，以下是一个包含邮箱、手机号、密码和确认密码的 Vue 注册表单验证示例： ``` <template> <div> <form> <div> <label>邮箱</label> <input type="email" v-model="email" /> <div v-if="errors.email" class="error">{{ errors.email }}</div> </div> <div> <label>手机号</label> <input type="tel" v-model="phone" /> <div v-if="errors.phone" class="error">{{ errors.phone }}</div> </div> <div> <label>密码</label> <input type="password" v-model="password" /> <div v-if="errors.password" class="error">{{ errors.password }}</div> </div> <div> <label>确认密码</label> <input type="password" v-model="confirmPassword" /> <div v-if="errors.confirmPassword" class="error">{{ errors.confirmPassword }}</div> </div> <button type="submit" @click.prevent="submitForm">注册</button> </form> </div> </template> <script> export default { data() { return { email: '', phone: '', password: '', confirmPassword: '', errors: {}, }; }, methods: { validateForm() { this.errors = {}; if (!this.validEmail(this.email)) { this.errors.email = '请输入正确的邮箱地址'; } if (!this.validPhone(this.phone)) { this.errors.phone = '请输入正确的手机号码'; } if (!this.password) { this.errors.password = '密码不能为空'; } else if (this.password.length < 6) { this.errors.password = '密码长度不能少于6位'; } if (this.confirmPassword !== this.password) { this.errors.confirmPassword = '两次密码输入不一致'; } return Object.keys(this.errors).length === 0; }, validEmail(email) { const re = /\S+@\S+\.\S+/; return re.test(email); }, validPhone(phone) { const re = /^[1][3,4,5,7,8][0-9]{9}$/; return re.test(phone); }, submitForm() { if (this.validateForm()) { alert('注册成功！'); } }, }, }; </script> <style> .error { color: red; } </style> ``` 在这个例子中，我们使用了 `type` 属性来指定输入框的类型，包括 `email`、`tel` 和 `password`。我们还定义了一个 `confirmPassword` 变量来存储确认密码的值，并在表单验证中进行了比较。在 `validateForm()` 方法中，我们对每个表单字段进行了验证。如果验证失败，则将错误信息存储到 `errors` 对象中。最后，我们通过检查 `errors` 对象是否为空来确定表单是否验证通过。 在模板中，我们使用了 `v-if` 指令来根据表单验证的结果来显示或隐藏错误信息。我们还定义了一些样式来使错误信息以红色显示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端组件开发

你的钟意将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值