Vue Element 之表单预验证

表单预验证和表单重置有相似之处，有兴趣可以看看表单重置；也可以了解一下表单验证

一、技术提要

• validate 方法
  

接下来，就是动手实现啦

二、实现步骤

第一步：获取到表单引用对象

首先，使用 ref 属性为子组件分配引用 ID。在 form 表单中注册ref="loginFormRef"，具体如下：

<el-form label-width="0px" :model="loginForm" ref="loginFormRef">
  <el-form-item class="btns">
    <el-button type="primary" @click="loginBtn">登录</el-button>
    <el-button type="info" @click="resetLoginForm">重置</el-button>
  </el-form-item>
</el-form>

然后在 script 中使用this.$refs.loginFormRef获取到表单引用对象

第二步：通过引用对象调用 validate() 函数

validate 函数中接收一个回调函数Function(callback: Function(boolean, object))，第一个形参 callback 是验证结果（boolean值），代表验证通过或失败

至此，完成

然后，你就可以根据验证结果写自己的需求啦，比如：进行登录请求

loginBtn () {
 this.$refs.loginFormRef.validate(async valid => {
    // 验证失败
    if (!valid) return
    // 验证成功，发起登录请求
    const { data: res } = await this.$http.post('login', this.loginForm)
    // 根据返回值，判断登录结果
    if (res.meta.status !== 200) return this.$message.error('登录失败')
    window.sessionStorage.setItem('token', res.data.token)
    this.$router.push('/home')
  })
}