ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

formvalidation的使用

2021-04-08 11:04:43  阅读:8  来源: 互联网

标签:窗口 验证 formvalidation 用户 模式 使用 页面


1、为什么要使用formvalidation

最近买了一套vue的前端页面,登录页面使用了formvalidation作为输入的验证,样式挺好看的,会在验证通过时在输入框的右侧显示对勾,在验证不通过时在右侧显示叉号,并在底部显示验证不通过的消息,于是想在其他页面新增对象的模式窗口中也增加这种验证方式

 formvalidation的官方网址

 https://formvalidation.io/guide/getting-started/

 

2、遇到的异常

我把代码原封原样的拷到了用户管理页面中新增用户的模式窗口中,稍作修改,然后在页面中查看效果,总是报一个classList not found的异常,并且出不来效果

 

 

 

 

 

 

3、分析异常的过程

我不知道是不是我少拷了哪部分数据,只好把用户列表页面做了备份,然后把登录页面的全部代码拷到用户列表页面,覆盖用户列表页面的内容,这次效果出来了,然后我一点一点的把页面多余不用的东西删掉,最后只留下formvalidation的那部分需要用到的内容,发现我并没有少拷任何东西,formvalidation要使用起来也很简单,就一个导入需要的资源,然后就是定义需要校验的字段。

那么问题出在哪里呢,难道是因为模式窗口一开始是隐藏的状态?我又恢复了用户列表页的原先代码,我把模式窗口一开始就设置为显示状态,发现这次竟然不报错了,formvalidation的效果也出来了。

我决定把formvalidation的初始化工作放到点击新增按钮后来执行,修改代码后发现点击按钮模式窗口弹出后还是报错,formvalidation的效果依然出不来,这个情况我大致可以预料一下,可能是因为方法执行应该放在模式窗口初始化完成后再执行,但是模式窗口并没有提供初始化完成的事件。

查阅资料后发现vue提供了这么一个方法来解决这个问题,那就是$nextTick方法

 

 最后提醒大家注意的一个问题,就是这热resetForm方法,js中定义的fields一定要与form中输入项能够一一对上,否则resetForm会报一个foreach的异常,好像是这个异常,不太记得了,总之会报错,无法执行。

 

标签:窗口,验证,formvalidation,用户,模式,使用,页面
来源: https://www.cnblogs.com/LcxSummer/p/14631210.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有