大家好，我是编程小6，很高兴遇见你，有问题可以及时留言哦。

前端条件验证如非空、字符数等，是前端验证的常见问题，虽然简单，但如果没有统一的验证方案，写起来就会非常冗余，且不能根据业务字段的变化和动态调整，给维护系统带来庞大的维护量，就这个问题，这两天设计了一下数据驱动的前端验证机制，抛砖引玉，供大家参考讨论。实现的效果如下图：

无输入

有输入但字数不超过10个

超过10个不超过50个

超过50个字符

数据驱动的实现

所谓数据驱动，是指我们在设计业务对象的时候，同时指定对应的业务项的验证规则，这样，任何涉及业务项的定义和验证规则，我们只需要定义一个业务模型就搞定了。如上例，在定义方案业务对象的同时，可以同时为其设置验证规则。

对组件进行数据绑定时，按如下方式进行设置，如上例中，设置了solution.title和solution.checks.title作为业务项和检查项。errors是检查项返回结果，在系统提交业务对象前，应检查errors是否为空，为空则阻塞提交功能。

这里稍微注意一下：这里为了实现数据的双向传递，即检查结果返回到我们的数据模型中，check-list组件和textbox组件是分开的，但如果对象合并了数据项和检查项，这里就不用分开了，2.6的vue版本不支持双v-model，其它的实现又不太自然，因此这里就有了这么一个分拆。

通用检查逻辑的实现

建立通用检查逻辑的目的是，只要通过数据模型就可以为前端所有定义验证规则的组件定义检查逻辑，为前端数据对象的验证提供统一方案。

检查逻辑在原理上其实很简单，就是check-list组件加入一个watch观察parent的value，并根据设定的检查条件产生检查结果。注意，这里的检查条件是通用的，也就是说任意的组件，都需要定义一个从0个到N个的检查项，check-list我在这里引入了一个checksHandler的混入对象，来实现这些检查项的分析，实现的大致逻辑如下：

上述举了isRequired、minChars、maxChars的例子，感兴趣的朋友可以根据自身情况自行添加，这里为了不对前端造成影响，所有的检查函数均为异步操作。

上述为Mixins的对象是基于验证复杂性的考虑，checklist和checksHandler可以根据业务实际进行多个模型的设计，并彼此交叉支持，实现编程的多样性。

目前是一个比较简单的思路，有很多细节还要进一步推敲，但抛砖引玉，欢迎大家沟通交流，提供更加新颖、有效的解决方案，助力系统的弹性设计和健壮高效。