vue3项目实战-登录表单校验

一般校验

为了演示的更清楚，这里在搭建好静态结构之后，先将登录页面的v-if标签由true改为false

此时，回到登录页，我们看到的是未登录的状态下的效果，这里显示请先登录

然后，为登录标签绑定一个事件，点击登录的时候让它跳转到登录页面

接下来，是表单校验的详细过程

准备表单对象

准备校验规则

在对应(el-form)的位置绑定

双向绑定

保存之后，回到浏览器，可以看到被绑定的属性前面多出了✳，即为必选项

而且点击的时候也会提示

自定义校验

首先，在表单对象中添加字段名agree，并将其置为true

然后，在校验规则中同步添加

在表单中进行绑定

保存之后，打开浏览器，控制台验证是否起作用

如果未选中，这里输出

反之，输出true

确认控制台返回结果之后，添加自定义校验逻辑

//自定义校验逻辑：勾选通过，不勾选，未通过
      if(value) {
        callback()
      }else {
        callback(new Error('请勾选同意用户协议'))
      }

传入value,如果成功的话，调用一下callback函数，反之，也调用一下，返回一个错误提示

来浏览器验证一下结果：

整个表单的内容校验

使用场景：每个表单域都有自己的校验触发事件，如果用户一上来就点击登录怎么办？

在点击登录时需要对所有校验的表单进行统一校验，总共分为两个步骤：

获取form表单实例，调用实例方法

1

const formRef = ref(null)

2

为登录操作绑定事件

定义事件，编写逻辑代码：

const doLogin = () => {
  //做表单校验
  formRef.value.validate((valid) => {
    console.log(valid)
    // valid:所有表单都通过校验，才为true
    if(valid) {
      //校验通过，发送登录请求
    }
  })
}

以上就是登录表单校验的全部内容，希望对大家有帮助，下期文章将详细介绍登录相关的业务实现，敬请期待吧~