微信小程序 WeUI form 表单验证

背景

因为公司项目需要，最近在调研微信小程序。小程序不仅提供了丰富的组件帮程序员快速构建app，而且还提供了一套微信风格的UI组件库 WeUI。
Form 表单数据验证是常用的场景之一。现在小程序中实现 form 表单验证有以下两种途径：

1. WxValidate - 表单验证
2. WeUI form - 本身提供的表单验证

因本人想用 WeUI，所以尝试采用第2种方式。但发现使用过程中各种坑。

WeUI form 表单验证问题

以 WeUI form 官方提供的表单验证 demo 为例，存在以下问题：

• 内置规则 required 无法判断空数组的情况。 即无法验证复选框选择状态；
• 当给一个 field 配置多条 rule，第一条 rule 验证失败，还会再验证第二条 rule，不符合逻辑。 如对于 mobile，不填如何数据，提示的错误信息还是 “mobile 格式不对”，应该提示 “mobile 必填”；
• 当表单验证失败时，返回的错误信息不一定包含所有的验证失败的 field 的错误信息。 如，挨个填写 qq 号，手机号等，每次都点击"确定" 进行验证，但应该显示的错误信息时有时无。
• 内置的规则除 required 外，都是必填。 即，如果想 mobile 选填，不添加 required 规则，只添加 mobile 规则。当不输入电话号码时，还会提示 “mobile 格式错误”；
• 验证规则无启用禁用状态。 即，如果 {required: false}，还是会识别为必填；

解决方案

我选择了改源码的方案。下载了 WeUI 组件库以后，对 form/form.js 进行了修改。

下载我修改后的 form.js 并替换到本地后，表单验证即可正常使用。

添加自定义 validator

附上给 form 添加自定义 validator 的使用示例：

在 weui-form-validator.js 定义针对 WeUI form 的 validator

// qq 验证规则
module.exports = {
  qq(rule, value, param, models) {
  	// 此处判断 value 有值且 qq号规则验证失败，则返回配置的错误信息 message
    if(!Rules.isOptional(value) && !Rules.qq(value)){
      return rule.message;
    }
  }
}

在具体的页面 pages/form/form.js 引入qq验证规则

// 此处 qq: true 为验证规则占位。当设置了 qq:false，则禁用此项验证。
{
      name: 'qq',
      rules: [{ required: true, message: 'qq必填' }, { qq: true, validator: FormValidator.qq, message: '请输入有效的qq号' }],
}