不用element等组件的情况下实现自定义数据校验

有时候开源组件的表单校验并不能满足我们的需求,我们可能在某些地方也需要对数据进行是否填写的校验,这时候我们就得想办法自己写一个来满足自己的需求了。

  • 例如下面这种,需要判断用户是否选择了医生池里的医生,如果未选择提交表单信息时就提示,并且只有在专家咨询打勾了才触发这个校验逻辑。


  • 大概思路是:在这个地方下面加一段提示信息,默认隐藏,提交表单时对数据进行判断,如果未选就更换状态为显示以提示用户,并且只有专家咨询选中情况下才触发。

  • 为了更贴近组件的样子(用户选择后立马把提示信息进行隐藏),我们可以用计算属性+监听器,用计算属性把这条数据单独抽离出来,再用监听器进行监听,如果数据发生变化就改变提示信息的状态为隐藏即可。

  • 为什么不直接监听数据变化要用计算属性配合?因为监听器如果监听整个表单数据对象的话,无论哪一个值变化都会引起监听器触发,另外一个原因就是计算属性是有缓存的,意思就是如果这个值未发生变化计算属性就不会触发,既然计算属性不触发那么监听器也不会触发,如果还不明白的话,建议去看vue官方文档计算属性+监听器那一段。







  • 如果想更加逼真,可以自己利用定位与伪元素为其加一个 * 将其控制也加进校验判断里
···

   
   付费咨询列表资源位ID不能为空

···

你可能感兴趣的:(不用element等组件的情况下实现自定义数据校验)