TDesign表单rules通过函数 实现复杂逻辑验证输入内容

Element ui 中 我们可以通过validator 绑定函数来验证一些不在表单model中的值 又或者处理一下比较复杂的判断逻辑

TDesign也有validator 但比较直观的说 没有Element那么好用

这里 我们给validator绑定了我们自己的checkAge函数

这个函数中 只有一个参数 value 而且 如果你的v-model绑定的值不在表单data绑定的对象中 这个value拿到的会是undefined

好在 我们在函数中可以直接通过 this拿到响应式数据

就比如这里 我们判断this.imageValue 是不是等于空字符串

然后这里 你直接在函数中 返回 true 表示验证通过 返回false 表示验证失败

验证失败 他会输出你message中绑定的内容

就没有Element ui中的这个callback处理提示了

如果你想判断多个逻辑 就只能写多个了

老实说 很直观的没有Element ui好用

相关推荐
询问QQ:6882388610 天前
基于MATLAB的三维SD-MTSP:采用蛇优化算法SO求解多旅行商问题的三维单仓库数据处理及...
tdesign
ttod_qzstudio1 个月前
替代 TDesign Dialog:用 div 实现可拖拽、遮罩屏蔽的对话框
前端·tdesign
是大刚啊1 个月前
微信小程序原生车牌输入器
微信小程序·小程序·tdesign·车牌号·车牌输入
小__小__码2 个月前
Python数据可视化用Matplotlib和Seaborn提升你的数据分析效率
tdesign
2401_853406883 个月前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
QC班长9 个月前
微信小程序引入TDesign组件后报错一直提示路径不对(Component is not found in path)的解决方法
微信小程序·小程序·tdesign·引入tdesign组件后报错
杨天天.1 年前
微信小程序原生,tdesign时间选择器,t-date-time-picker封装成组件,开始时间结束时间
微信小程序·小程序·tdesign
shadowflies1 年前
组件库TDesign的表格<t-table>的使用,行列合并以及嵌入插槽实现图标展示,附踩坑
前端·javascript·vue.js·vue·tdesign
LoveShadowing1 年前
TDesign引入阿里Iconfont图标库
tdesign
卡姿兰大眼猫&1 年前
TDesign 步骤条用法
tdesign