vue实现注册与登录功能,vue编写登录注册页面
本文主要介绍vue3如何优雅地实现移动登录注册模块的相关信息。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。下面让我们跟随边肖一起学习。
目录
前言
组件输入框
总体布局
v型车
数据检查
规则设计
表单表单
子组件生成检查功能。
核实
最终效果
摘要
前言
最近直接在vue3上开发移动项目，新的特性组合api确实带来了全新的开发体验。在使用这些特性时，开发人员可以将高度耦合的状态和方法放在一起进行统一管理，并根据具体情况将高度复用的逻辑代码单独打包，这对提高整体代码架构的健壮性非常有帮助。
现在每一个新上线的移动项目，基本上都包含了注册模块。在本次实践中，对注册中的表单控制做了一些经验总结，通过提取常用代码，提高了代码的可维护性和开发效率。
接下来看美术生提供的图片。
注册页面
登录页面
忘记密码页面
修改密码页面
通过观察上面的产品图片，可以清楚的看到整个登录注册模块的核心组件是输入输入框。只要输入框组件开发完整，就可以被其他页面直接引用。
输入框开发完成后，只显示静态页面。此外，我们还必须设计一套通用的数据验证方案，应用于每个页面的表单控件。
输入框组件
从上面的分析可以看出，输入框组件是整个登录注册模块的核心内容。我们先来看看输入框组件有哪些UI表单。
表格一
左边有文字86，中间是输入框。在右边，如果在输入框中检测到数据，将显示十字图标；如果没有数据，它将是空白的，以隐藏图标。
表格二
左边只有一个输入框，右边是副本。文案内容可能是验证码，也可能是点击验证码后显示的倒计时文案。
三年级
左侧仍然只有一个输入框，如果检测到输入框中的内容，则在右侧显示十字图标，如果内容为空，则隐藏图标。
布局
根据上面观察到的现象分析，我们在设计这个输入组件的时候，可以把它分为左、中、右三个部分。左边可能是文案或者空白，中间是输入框，右边可能是文案或者叉图标。
模板内容如下：
模板
div class=input
！-左边，是左边的内容-
span class=left-text
{{ lt }}
/span
！-在中间-
input class= content v-bind= $ attrs :value= value @ input= onChange /
！-右侧rt判断端是验证码还是十字图标-
div v-if= rt== timer class= right-section
{{ timerData.content }}！-这可能是一个“验证码”或倒计时-
/div
差异
v-else-if=rt==close
右半部分
van-icon name=close /！-十字叉图标-
/div
/div
/模板
在布局上，左、中、右的父元素设置为display:flex，子元素的三个元素都设置为display:inline-block模式，这样左右两边可以根据自己的内容自适应宽度，中间的输入设置为flex:1来填充剩余的宽度。
这种布局在理论上是可行的，但在实践中发现了问题。
演示效果图如下：
当右侧宽度继续增加时，中间输入由于默认宽度而溢出右侧，这不是我们想要的。
这个问题的解决方法很简单，只需要将中间输入的宽度设置为0，就达到了想要的效果，如下图。
v-model
外部页面引用上述封装的组件结构如下：
输入形式
lt= 86 ！-左边显示86-
rt=close ！-右侧显示十字图标-
Placeholder=请输入您的手机号码
/
外部页面创建了如下一个表单数据form_data，但是希望form_data的数据能够以v-model的形式绑定到子组件输入框的值。
const form_data=reactive({
Number_number: ，//用户名
密码： ，//密码
密码： ，//重复的密码
验证码： ，//验证码
})
在vue3中实现v-model非常简单。父组件使用v-model:xx来完成绑定，其中xx对应于要绑定的子组件的状态名，如下所示。
输入形式
lt= 86 ！-左边显示86-
rt=close ！-右侧显示十字图标-
Placeholder=请输入您的手机号码
虚拟模型：value=form_data.password
/
在下一个子组件中，首先声明要绑定的属性值，并监听输入框的oninput事件。代码如下：
模板
div class=input
.
input class= content v-bind= $ attrs :value= value @ input= onChange /
.
/div
/模板
导出默认定义组件({
道具：{
lt:字符串，
rt:字符串，
值：字符串
},
设置(道具、上下文){
const onChange=(e:keyboard event)={
const value=(e . target as HTMLInputElement)。价值；
context.emit(update:value ，value)；
};
返回{
待清扫房
}
}
})
oninput事件的回调函数使用context.emit (update: value ，value)返回获得的值。
其中，update:value的前面部分以固定方式写入，后面部分填充要建立双向绑定的州名，从而轻松完成v-model的绑定。
数据校验
一般来说，一个页面只要涉及到一个表单控件(比如输入框)，就需要对对应的值做数据校验。按照原来的方法，当用户点击按钮时，js接受响应，逐个获取每个表单项的值进行验证。
当然这种方法可以实现功能，但是效率不高，不够简洁，因为要检查很多页面，大量的检查逻辑都是重复写的。
接下来，我们设计了一个通用的验证方案，封装了所有可重用的逻辑代码，可以快速应用到每个页面，提高开发效率。
以注册页面为例，模板代码如下。创建四个输入框组件：手机号、手机验证码、密码、确认密码。在末尾放置一个注册按钮。(为了看起来更清楚，下面的代码删除了所有ts类型)
Form ref=form :rules=rules
输入形式
lt= 86
rt=关闭
虚拟模型：value=form_data.number_number
Placeholder=请输入您的手机号码
propName=number_number
/
输入形式
rt=计时器
虚拟模型：value=form_data.captcha
Placeholder=请输入您的手机验证码
propName=captcha
/
输入形式
rt=关闭
虚拟模型：value=form_data.password
Placeholder=请输入您的密码
type=密码
propName=密码
/
输入形式
rt=关闭
v-model:value= form _ data . PP password
Placeholder=请输入确认密码
type=密码
propName= ppassword
/
text= note book @ sub= onSubmmit /！-注册按钮-
/表单
在借鉴了其他优秀框架的表单做法后，我们先在最外层添加一个组件表单，然后给每个输入框组件添加一个属性propName。此属性与rules一起使用，rules是手动定义的验证规则。当传递给表单组件时，子组件(输入框组件)可以通过propName属性获得自己的验证规则。
整体实现思路可以从一开始就串联起来。首先，前端开发人员定义当前页面的验证规则，并将其传递给表单组件。在收到它们之后，表单组件将把验证规则分发给它的每个子组件(输入框组件)。子组件得到校验规则后，可以对输入框的值做相应的数据校验。
当用户单击register按钮时，单击该事件将获得表单组件的实例并运行其validate方法。此时，表单组件将对它的每个子组件进行一轮数据验证。一旦所有验证成功，validate方法将返回true。如果其中一个验证失败，validate方法将返回false，并弹出一条错误消息。
注册页面逻辑如下：
导出默认定义组件({
组件：{
输入，//输入框
按钮，//注册按钮
表单，//表单组件
},
设置(道具){
const form_data=.//省略
常量规则=.
//获取最外层窗体组件的实例
const form=ref(null)；
const onSubmmit=()={
如果(！form.value ！form.value.validate()) {
返回false
}
//验证通过，可以请求注册接口。
}
返回{
形式，
规则，
提交时，
表单_数据
};
},
});
定义一个变量Form，并用它来获取form form的实例。Form ref=form :模板上的rules=rules 只需要添加一个ref属性。
用户单击register按钮来触发onSubmmit函数，因为表单是用ref创建的变量。要获取该值，您需要调用。价值。运行form.value.validate()函数，这样表单下的每个子组件都可以开始执行验证逻辑。如果所有子组件都通过，则返回true，如果有一个失败，则返回false。
从上面的分析可以看出，表单控件只暴露了一个validate函数，调用这个函数就可以知道验证是否通过。那么validate是如何知道使用什么规则进行验证的呢？因此，我们应该首先设计一组验证规则，并将其传递给表单组件，以便其内部的validate函数可以使用规则来执行验证。
rules设计
规则是一个对象。例如，上述注册页面的规则定义如下：
常量规则={
number_number:[{
类型：必需，
Msg:“请输入正确的手机号码”
}
电话
],
验证码：[
{
类型：必需，
消息：“验证码不能为空”
}
],
密码：[
{
类型：必需，
消息：“请输入您的密码”，
},
{
类型：“minLength”，
参数：6，
消息：“密码长度不能少于6位数”，
},
],
密码：[
{
类型：“客户”，
回调(){
if (form_data.password！==form _ data . PP password){
返回{
标志：假，
消息：“两次输入的密码不一致”，
};
}
返回{
flag:真的，
};
},
},
]
}
我们定义的规则是一个键值对形式的对象。key对应模板上每个输入框组件的propName，值是一个数组，对应输入框组件应该遵循的规则。
现在仔细看看每个对象下的值的组成。将值组织成数组的原因是它可以向输入框添加多个规则。而规则对应两种形式，一种是对象，一种是字符串。
字符串很好理解，比如上面的number_number属性，对应的就是字符串phone。这个规则的意思是这个输入框的值要遵循手机号的规则。当然，如果字符串是通过邮件填写的，就要作为邮件检查。
如果规则是一个对象，它包含以下属性：
{
类型，//类型
Msg，//用户定义的错误消息
Params，//传递的参数值如{type:minLength ，params:6}，值的最小长度不能少于6位。
回调//自定义检查功能
}
类型是验证类型。如果填写了required，则表示它是必需的。如果用户没有填写，当用户点击注册按钮提交时，将会报告msg定义的错误消息。
此外，type还可以填充minLength或maxLength来限制值的长度。最多可以限制多少位数？它可以通过参数传递。
最后，类型也可以用custome填充，这意味着开发者可以定义输入框的检查逻辑函数回调。这个函数要求最终返回一个带有flag属性的对象，flag属性是一个布尔值，它会告诉检查系统检查是成功还是失败。
Form表单
规则被定义并发送给表单组件，表单组件需要将检查逻辑分发到其子组件，以便每个子组件负责生成自己的检查函数。
！-表单组件-
模板
div class=" form "
插槽/插槽
/div
/模板
脚本语言
从“vue”导入{ ref，provide }；
导出默认定义组件({
名称：表单，
道具：{
规则：对象
},
设置(道具){
.//省略
提供( rules ，props . rules)；//分发验证规则。
const validate=()={
//检查对外公开的函数
}
返回{
生效
}
}
})
/脚本
从上面的结构可以看出，表单组件模板提供了slot的功能，在逻辑代码中使用provide将验证规则传递给后代，并公开了validate函数。
子组件生成校验函数
这一次，我们已经回到了登录和注册模块的核心组件InputForm，现在我们必须向输入框组件添加检查逻辑。
从“vue”导入{ inject，on mounted }；
.
设置(道具、上下文){
const rules=inject( rules )；
const rule=rules[props . propname]；//通过propName获取验证规则
const useValidate=()={
const validate fn=get validate(rule)；//获取检查函数
const execValidate=()={
返回validate fn(props . value)；//执行检查函数并返回检查结果
};
onMounted(()={
const Listener=inject( collect validate )；
if(监听器){
监听器(exec validate)；
}
});
};
use validate()；//初始化检查逻辑
.
}
规则的结构如下所示。通过inject和propName，可以获取表单并分发到输入框执行rule规则。
{
验证码：[{
类型：必需，
消息：“验证码不能为空”
}],
密码：[{
类型：必需，
消息：“请输入您的密码”，
}]
}
将规则rule传递给getValidate函数(后面会讨论)以获得验证函数validateFn。传递到输入框中的验证函数validateFn的值可以返回验证结果。在这里，validateFn封装在一个层中，并交给execValidate供外部使用。
在上面的代码中，我们也看到了onMounted包的逻辑代码。当组件挂载后，使用inject获取表单组件传递的函数监听器，并将验证函数execValidate作为参数传递执行。
让我们回到下面代码中的表单组件，看看Listener是什么类型的函数。
设置(道具){
const list=ref([])；//定义一个数组
const listener=(fn)={
list . value . push(fn)；
};
提供( collectValidate ，listener)；//分发监听功能。
//验证功能
const validate=(propName)={
const array=list . value . map((fn)={
返回fn()；
});
const one=array.find((item)={
return item.flag===false
});
if (one one.msg) {
//验证失败。
alert(one . msg)；//弹出错误提示
返回false
}否则{
返回true
}
};
.
从上面可以看出，表单组件分发监听器函数，而子组件在onMounted的生命周期钩子中获取分布式监听器函数，并将子组件中定义的验证函数execValidate作为参数传递执行。
这样，可以确保一旦安装了每个子组件，它就会将自己的验证函数传递给表单组件中的列表集合。表单组件的validate方法只需要遍历列表，就可以依次执行每个子组件的验证函数。如果所有验证都通过，它将向外部页面返回true。如果其中一个失败，将弹出错误提示并返回false。
至此，整个验证过程已经开启。Form首先将验证规则分发给子组件，子组件获取规则生成自己的验证函数，然后在挂载后将验证函数返回给Form进行收集。此时，表单组件公开的validate函数可以实现对所有表单控件的数据验证。
接下来，最后一步是研究子组件是否通过规则生成自己的检查函数。
校验
首先，编写一个管理验证逻辑的Validate类。代码如下。我们可以根据新的需求不断扩展这个类的方法，比如添加email或者maxLength方法。
类别验证{
构造函数(){}
必选(数据){//验证是否必选。
Const msg=此信息是必需的；//默认错误消息
if(data==null (type of data=== string data . trim()=== ){
返回{
标志：假，
味精
}
}
返回{
标志：正确
}
}
//检查是否是手机号。
电话(数据){
Const msg=请填写正确的手机号码；//默认错误消息
const flag=/^1[3456789]\d{9}$/.测试(数据)；
返回{
味精，
旗
}
}
//检查数据的最小长度
minLength(data，{ params }) {
设minLength=params//最小位数
if (data==null) {
返回{
标志：假，
消息：“数据不能为空”
}
}
if (data.trim()。length=minLength) {
返回{ flag:true }；
}否则{
返回{
标志：假，
Msg:`数据的最小长度不能少于${minLength}位
}
}
}
}
在Validate类定义的所有方法中，第一个参数data是要验证的值，第二个参数定义页面上每个规则中的规则。其形状为{type: minLength ，params: 6，msg:密码长度不能少于6位 }。
Validate类中每个方法返回的最终数据结构类似于{flag:true，msg:}。在结果中，flag用于标识验证是否通过，msg是错误消息。
验证类Validate提供了各种验证方法。接下来，使用singleton模式生成该类的一个实例，并将实例对象应用于一个真实的验证场景。
const getInstance=(function(){
let _ instance
返回函数(){
if(_instance==null){
_ instance=new Validate()；
}
返回实例；
}
})()
通过调用getInstance函数，可以得到Validate实例对象的单个实例。
通过向getValidate函数传递一个规则，组件的输入框可以返回组件所需的验证函数。接下来，看看getValidate函数如何通过规则生成验证函数，代码如下：
/**
*生成检查功能
*/
导出常量getValidate=(rule)={
const ob=getInstance()；//获取验证类实例对象
const fn _ list=[]；//收集所有验证函数
//遍历规则数组，根据其类型获取Validate类中的验证方法，放入fn_list进行集合。
rule.forEach((item)={
If (typeof item===string) {//字符串类型
fn_list.push({
fn:ob[项目]，
});
} else if (isRuleType(item)) {//对象类型
fn_list.push({
//如果item.type是custome type，则check函数直接使用回调。否则，从ob实例中获取。
.项目，
fn: item.type===custome ？item.callback : ob[item.type]，
});
}
});
//检查要返回的函数
const execuate=(值)={
设flag=true，
msg=“”；
for(设I=0；i fn _ list.lengthi ) {
const item=fn _ list[I]；
const result=item.fn.apply(ob，[value，item])；//item.fn对应Validate类定义的验证方法。
如果(！结果.标志){
//验证失败
flag=false
msg=item.msg？item.msg:结果. msg；//使用默认错误信息还是用户自定义信息？
打破；
}
}
返回{
旗帜，
味精，
};
};
返回execuate
};
rule的数据结构类似于下面的代码。当一个规则传入getValidate函数时，它会判断end是对象还是字符串，然后从ob实例中获取其类型对应的check函数，并存储在fn_list中。
[
{
类型：必需，
消息：“请输入电话号码”
},
电话
]
getValidate函数最后返回execuate函数，也是输入框组件获得的check函数。输入框值可以在输入框组件中获得。如果将值传递给execuate方法调用，该方法将遍历之前缓存的check函数列表fn_list，通过将值传递给每个check方法，可以获得并返回输入框组件对当前值的检查结果。
上面的验证逻辑已经过了。接下来，无论是开发登录页面、忘记密码还是修改密码，都只需要使用Form组件和InputForm组件来组织页面结构，并编写一份当前页面的规则验证规则。剩下的所有验证细节和交互动作都交给Form和InputForm进行内部处理，这样会大大提高开发效率。
最终效果
总结
关于vue3如何优雅地实现移动登录和注册模块的文章到此结束。关于vue3移动登录和注册模块的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。