017登录页-表单的验证和EIMessage样式

校验规则，这个是在表单内，我们的按钮在表单外面没法用

所以我们自己拿一下

ElForm 代表 ElementPlus 组件库中的表单组件类型。ElementPlus 是基于 Vue 3 开发的一套 UI 组件库，ElForm 组件用于创建表单，提供了表单验证、布局等功能，方便开发者快速搭建表单界面。

在 TypeScript 环境下，使用 ElForm 进行类型注解可以让代码具备更好的类型检查和智能提示功能。例如，在创建一个 ref 来引用 ElForm 组件实例时，可以指定其类型为 ElForm 组件实例的类型，这样在访问该实例的属性和方法时，TypeScript 编译器就能进行类型检查，避免一些潜在的错误。

这行代码使用了 Vue 3 的组合式 API 和 TypeScript 的类型系统，目的是创建一个响应式引用 formRef，专门用于引用 ElForm 组件的实例。下面为你详细解释其各个部分的含义：

通过这行代码，开发者可以在 Vue 3 项目里使用 formRef 来获取 ElForm 组件的实例，进而调用该组件实例的方法或访问其属性。

1. `const formRef`

const 是 JavaScript 中用于声明常量的关键字，意味着一旦变量被赋值，就不能再重新赋值。不过对于引用类型（如对象、数组等），可以修改其内部属性。
formRef 是声明的变量名，从命名来看，它大概率是用于引用表单组件实例的。

2. `ref`

ref 是 Vue 3 组合式 API 中的一个核心函数，其作用是创建一个响应式的引用对象。通过 ref 包装的值会变成响应式的，当这个值发生改变时，依赖该值的模板或计算属性等会自动更新。

3. `<InstanceType<typeof ElForm>>`

这部分属于 TypeScript 的类型注解，为 ref 创建的引用对象指定了具体的类型。
- typeof ElForm：在 TypeScript 中，typeof 操作符用于获取一个值的类型。这里的 ElForm 应该是一个 Vue 组件（通常是 ElementPlus 组件库中的表单组件），typeof ElForm 表示获取 ElForm 组件的构造函数类型。
- InstanceType<...>：InstanceType 是 TypeScript 提供的一个工具类型，它接收一个构造函数类型作为参数，返回该构造函数实例的类型。所以 InstanceType<typeof ElForm> 表示 ElForm 组件实例的类型。

4. `()`

ref 函数调用时括号内为空，这表明创建的 formRef 初始值为 undefined。后续在组件挂载后，通过 ref 属性绑定到 ElForm 组件上，formRef.value 就会指向该组件的实例。

这里这样写

此代码的功能是调用 formRef 所引用的表单实例的 validate 方法进行表单验证，根据验证结果在控制台输出 “验证成功” 或 “验证失败” 的信息。

1. `formRef.value`

在 Vue 3 的组合式 API 里，formRef 通常是使用 ref 函数创建的响应式引用对象。ref 函数会将传入的值包装成一个响应式对象，该对象有一个 value 属性用于存储实际的值。若 formRef 通过 ref 属性绑定到了 ElForm 组件上，那么 formRef.value 就会指向该表单组件的实例。

2. `?.`

?. 是 JavaScript/TypeScript 中的可选链操作符。它的作用是在访问对象的属性或调用对象的方法时，先检查对象是否为 null 或 undefined。如果对象为 null 或 undefined，则直接返回 undefined，而不会抛出错误；如果对象不为 null 或 undefined，则继续访问其属性或调用其方法。在这里使用可选链操作符，是为了确保在 formRef.value 为 null 或 undefined 时，不会尝试调用 validate 方法，避免出现错误。

3. `validate((valid) => { ... })`

validate 是 ElForm 组件实例的一个方法，用于对表单进行验证。该方法接收一个回调函数作为参数，当验证完成后会调用这个回调函数，并将验证结果作为参数传递给它。
(valid) => { ... } 是一个箭头函数，作为 validate 方法的回调函数。valid 是一个布尔值，表示表单的验证结果，true 表示验证成功，false 表示验证失败。