@wxa/validate

wxa-validate参照了vee-validateValidate 表单校验 - 图1的实现思路在wxa内提供了便捷的表单校验功能

安装

  • yarn

yarn add @wxa/validate

  • npm

npm i @wxa/validate —save

在app.js文件中引入

  1. import {
  2.     wxa
  3. } from '@wxa/core';
  4. import WxaValidate from '@wxa/validate';
  6. wxa.use(WxaValidate);

在具体页面中使用

引入wxa-validate之后，在页面里中可以直接通过this.func的格式使用入以下属性和方法：

名称类型作用
$form属性{
    dirty: false, // 用户是否有接触表单
    valid: { //已经校验的表单信息
        name: true // 表单中data-name的输入框输入值符合要求
    }
    errMsgs: [‘请输入name’] // 用于反显给用户的错误信息
}
可以在开发者工具中AppData页卡查看完整数据
$type方法更新对应value，如下面代码中由于data-name=”name”，用户输入之后该方法会直接更新this.data.name的值
$typeAndValidate方法1、执行$type更新对应value；2、执行规则校验
$validate方法校验某个input的输入值，如在页面中执行this.$validate(‘name’)会去校验data-name=”name”的输入框值，返回结果为true或者false
$validateAll方法通常用于最后的表单提交，方法会返回一个promise

原生微信input元素使用wxa-validate示例：

  1. <input
  2.     class="wxa-input"
  3.     type="text"
  4.     maxlength="20"
  5.     placeholder="请填写姓名"
  6.     placeholder-class="psection"
  7.     value="{{name}}"
  8.     data-name="name"
  9.     data-rule="required|username"
  10.     bindinput="$typeAndValidate"
  11.     bindfocus="$clearErrorMsg"
  12.     bindblur="$validate"/>
  14. <view class="item-error" wx:if="{{$form.dirty && !$form.valid.name}}">请填写有效中文姓名</view>

原生微信picker元素使用wxa-validate示例：

  1. <picker
  2.     class="item-picker wxa-input"
  3.     mode="selector"
  4.     range="{{genderList}}"
  5.     value="{{gender}}"
  6.     data-name="gender"
  7.     data-rule="required"
  8.     bindchange="$typeAndValidate">
  9.         <view class="picker-text">{{filter.gender(gender) || '请选择性别'}}</view>
  10. </picker>
  12. <view class="item-error" wx:if="{{$form.dirty && !$form.valid.gender}}">请选择性别</view>

注意：所有需要使用wxa-validate做校验的input、picker等元素的class属性必须包含有wxa-input

提交表单信息示例：

  1. this.$validateAll().then(res => {
  2.     if (res.valid) {
  3.         ...
  4.     }
  5. }, err => {
  6.     console.warn(err);
  7. });

模版中使用插件

  1. <input value='{{pwdConfirme}}' data-rule="required|password|weakPwd|confirmed:.confirmed" data-name="pwdConfirme" bindinput="$validate"type="number" maxlength="6"/>
  2. </view>
  3. <view wx:if="{{$form.errMap['pwdConfirme'].password}}">交易密码格式不对，请重新输入</view>
  4. <view wx:elif="{{$form.errMap['pwdConfirme'].weakPwd}}">交易密码过于简单，请重新输入</view>
  5. <view wx:elif="{{$form.errMap['pwdConfirme'].confirmed}}">两次密码不一致，请重新输入</view>

上面代码中input使用了4个校验规则：required、password、weakPwd、confirmed。

其中confirmed规则带了参数.confirmed，插件会获取（wx.createSelectorQuery().select(‘.confirmed’)）对应组件的值作比较。