表单预验证和表单重置有相似之处,有兴趣可以看看表单重置;也可以了解一下表单验证
一、技术提要
- 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')
})
}