问题描述
在项目中经常用到表单验证,例如校验长度,校验是否存在,校验格式是否正确
but今天在校验两次输入内容是否一致(例如校验密码)的时候卡了壳,通常大家在校验这种问题的时候应该是这样写的
在这里插入图片描述
在这里插入图片描述
碰壁过程
这样写的话确实能够实现这个功能,但是没有达到复用的效果,设想如果多个页面都有验证两次输入内容是否一致的需求,难道每次都要在data中声明一个校验重复的方法validatePass吗?
因此我想通过引用外部js的方式,把校验重复,校验电话格式,校验长度等校验方法全部放到这个js文件中,使用的时候把js文件import进来,直接调用相应的方法即可。行动如下
在这里插入图片描述
validatorTools.js中的内容
在这里插入图片描述
rules声明修改如下
在这里插入图片描述
but报错啦
在这里插入图片描述
也就是this.form.userPwd根本就获取不到, 我想是因为在实例初始化过程中不能这样使用,然后我把rules的定义挪到created里
在这里插入图片描述
这时不报错了,但是在created中定义又存在一个问题,就是获取到的this.form.userPwd永远只是初始值“”,并不会随着data的数据变化而变化,因为整个声明周期只会进入created一次。
解决办法
这个现象,让我想到了beforeUpdate,于是
在这里插入图片描述
在这里插入图片描述
在每次打开新增修改模态框的时候进行校验,在beforeUpdate中能够获取到this.form.userPwd的实时值,实现了我想要的功能。也许这并不是最好的解决办法,但是我真的尽力了。如果有小伙伴有更好的解决办法,一定要告诉我哟!

我的问题记录希望能帮到你,啦啦啦~

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐