温馨提示:想要自制表单验证的请看上一篇
这次,我们着重讲一讲,表单验证过后怎么清空表单验证
(1)清空表单内容
// 表单数据
const form = reactive({
// 用户名
account: null,
// 密码
password: null,
// 手机号
mobile: null,
// 验证码
code: null,
// 是否同意
isAgree: false
})
// 控制登录方式的切换
const changeLogin = () => {
// 清空表单。重置错误信息
for (const key in form) {
if (key === 'isAgree') {
form[key] = false
} else {
form[key] = null
}
}
(2)清空错误的提示信息:使用第三方提供的方法
target.value.resetForm()
target是ref绑定的form表单
(3)兜底校验
// 点击登录
const handleLogin = async () => {
const vaild = await target.value.vaildate()
console.log(vaild)
if (vaild) {
// 表单验证通过
// 调用接口实现登录
}
}
总结:Form 组件提供 validate 方法对表单进行整体校验
注意:validate方法不支持回调,支持Promise的API