vue注册登录表单验证,vue 登录验证
本文主要介绍Vue3的登录表单验证功能。本文通过示例代码向您详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
目录
一、实施思路及效果图二。实施过程三。完整的代码和渲染
一.实现思路与效果图
使用async-validator插件，并检查由Ali生成的antd和ElementUI组件库中的表单默认使用的async-validator。
效果图：
二.实现具体过程
npm i异步验证程序
绑定loginForm
const loginForm=reactive({
用户名： ，
密码： ，
});
初始化检验规则和错误提示。
//检查规则
常量描述符=反应({
用户名：{
必填：真，
消息：“账号不能为空”，
},
密码：[
//多个验证规则
{
必填：真，
消息：“密码不能为空”，
},
{
验证器(规则、值、回调){
值12？Callback(新错误(不能少于12位)):callback()；
},
},
],
});
在created中实例化构造函数意味着创建一个checker，参数是check rule对象。
const validator=reactive(新模式(描述符))；
定义的提交方法
const submit=()={
this.clearMessage()
validator.validate(this.form，
第一字段：真
}).然后(()={
//验证通过
console.log(确定)
}).catch(({ errors })={
//验证失败
//显示错误消息
for(让{ field，message }出错)
this.errorMessage[field]=消息
})
},
消息//清除验证的错误消息。
const clearMessage=()={
for (let key in errorMessage) {
error message[key]=“”；
}
};
验证方法
validator对象的validate方法用于验证数据是否符合有效性规则。
验证空对象是否符合验证规则。
函数(源，[选项]，回调):承诺
参数：
要由源验证的对象(必需)[options]验证处理选项对象(可选)回调函数的配置(可选)回调验证完成时调用的选项。
{
SuppressWarning: false，//是否抑制无效值的内部警告？
First: false，//第一条规则验证错误时是否调用回调，不处理其他验证规则？
FirstFields: true //指定字段的第一条规则验证错误时是否调用回调，不再处理同一字段的验证规则。True表示所有字段。
}
返回值：
validate方法返回一个promise对象，然后可以使用和catch方法绑定成功或失败的流程。
validator.validate({})。然后(()={
Console.log(“验证通过”)
})。catch(({错误，字段})={
Console.log(验证失败，错误，字段)
})
使用v-bind控制输入框红色的显示和隐藏：class= { check username:is active username } 如果为空，它将显示红色。
三.完整代码与效果图
完全码
模板
div class=main
H3Vue3表单验证/h3
div class=窗体框
div class=窗体-组
Class= label 账号/标签
投入
:class= { check username:is activeusername }
type=text
v-model=loginForm.username
class=输入
Placeholder=请输入账号
/
span class= check-message“{ error message . username } }/span
/div
div class=窗体-组
Class= label 密码/标签
投入
:class=“{ check password:is active password }”
tyep=密码
v-model=loginForm.password
type=text
Placeholder=请输入您的密码
class=输入
/
span class= check-message“{ error message . password } }/span
/div
div class=窗体-组
按钮class= BTN @ click= submit()保存/按钮
/div
/div
/div
/模板
脚本设置
从"异步验证程序"导入架构；
从“vue”导入{ reactive，ref }；
//控制输入框变红
const为活动用户名=ref(false)
const is active password=ref(false)
//表单对象
const loginForm=reactive({
用户名： ,
密码： ,
});
//校验规则
常量描述符=反应({
用户名：{
必填：真，
消息： 姓名不能为空，
},
密码：[
{
必填：真，
消息： 密码不能为空，
},
],
});
//错误提示
常量错误消息=反应({
用户名： ,
密码： ,
});
常量验证器=反应式(新模式（描述符));
const submit=()={
if (loginForm.username===) {
isActiveUsername.value=true
}
if (loginForm.password===) {
isActivePassword.value=true
}
if (loginForm.username！=) {
isActiveUsername.value=false
}
if (loginForm.password！=) {
isActivePassword.value=false
}
clearMessage()；
验证器。验证(loginForm，{
第一字段：真的，
})。然后(()={
//校验通过
console.log(校验通过，可以发起请求);
})。catch(({ errors })={
//校验未通过
//显示错误信息
for (let { field，message } of errors)错误消息[field]=message；
});
};
//清空校验错误提示
const clearMessage=()={
for (let key in errorMessage) {
错误消息[key]=" "；
}
};
/脚本
样式范围。主要{
文本对齐：居中；
}。btn {
边距：0;
行高：1;
填充：15px
高度：30px
宽度：60px
字体大小：14px
边框-半径：4px
颜色：# fff
背景色：# 2080f0
空白：nowrap
大纲：无；
位置：相对；
边框：无；
显示：内嵌-伸缩；
柔性包装：nowrap
伸缩：0;
对齐-项目：居中；
对齐-内容：居中；
用户选择：无；
文本对齐：居中；
光标：指针；
文字-装饰：无；
}。表单框{
宽度：500像素
最大宽度：100%;
边距：0自动；
填充：10px
边框：5px纯色RGB(171 174 186)；
}。表单组{
高度：30px
边距：10px
填充：10px 15px 10px 0；
}。标签{
右填充：10px
左填充：10px
显示：内嵌-块；
框大小：边框-框；
宽度：110像素
文本对齐：右对齐；
}。输入{
宽度：calc(100%-120 px)；
高度：28px
}。检查消息{
颜色：# d03050
位置：相对；
左：-70px；
}。检查密码，检查用户名{
边框：2px纯色#d03050！重要；
}
/风格
参考链接：
https://github.com/tmpfs/async-validate
https://www.cnblogs.com/wozho/p/10955525.html
到此这篇关于Vue3实现登录表单验证的文章就介绍到这了，更多相关vue3表单验证内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。