重读vue电商网站7之登录预校验

在我们点击登录按钮,不应该直接发起网络请求,而是应该对表单进行预校验,检验成功才会发送请求。


拿到表单引用对象,即可进行对表单的校验。

首先,给登录按钮通过 @click 来绑定一个事件

下一步,在 methods 中添加 login 方法,validate函数参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise

 

此时,我们点击登录按钮,查看是否进行了预校验:


此时,按照之前的校验规则,是存在问题的。所以返回 false。我们来一个正确示例吧:


 

posted @ 2022-06-02 21:12  前端导师歌谣  阅读(41)  评论(0编辑  收藏  举报