vue element-ui 的form表单验证rules

Posted 2023-05-03

参考技术A 最近在做富文本编辑器。使用传统的rules，对含有emoji的文本计算长度有误。

如果输入100多文字，加大量emoji的情况下。字符长度超出200，这时只靠rules去验证，会认为合法。不符合业务逻辑。
通过查询api发现。在rules中，可以写入验证函数。

关于自定义的element-ui表单组件的校验

参考技术A TSS 自定义了基础组件 ElTreeSelect。在 el-form 中使用时，会出现异常现象：

选择数据后，关闭并重置表单（resetFields），会触发 ElTreeSelect 表单项的校验，导致再次打开表单时，表单项 ElTreeSelect 有校验提示（比如：必填）

组件 ElTreeSelect 内部引用了 el-input 组件，其在 value props 变化时会触发 el-form 表单的 validate 表单校验。源码： https://github.com/ElemeFE/element/blob/55bac06f0f9e26b820518243f3987cab9699001b/packages/input/src/input.vue#L266

给组件 ElTreeSelect 内部的 el-input 组件设置 props: validate-event=false。

表单项 ElTreeSelect 的校验在 change、blur 时不会如期望触发，只会在点击表单提交时校验才会触发。

组件 ElTreeSelect 在 value props 变化时，没有触发 el-form 表单的 validate 表单校验。

照葫芦画瓢，同 element-ui 表单组件一样，在 value 监听器中校验值变化，并触发表单校验。

需要依赖的方法和工具函数可以从官方源码中获取。