@wxa/validate v2.5.1

wxa-validate表单校验

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

安装

• yarn

  yarn add @wxa/validate

• npm

  npm i @wxa/validate --save

在app.js文件中引入

import {
    wxa
} from '@wxa/core';
import WxaValidate from '@wxa/validate';

wxa.use(WxaValidate);

在具体页面中使用

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

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

<input
    class="wxa-input"
    type="text"
    maxlength="20"
    placeholder="请填写姓名"
    placeholder-class="psection"
    value="{{name}}"
    data-name="name"
    data-rule="required|username"
    bindinput="$typeAndValidate"
    bindfocus="$clearErrorMsg"
    bindblur="$validate"/>

<view class="item-error" wx:if="{{$form.dirty && !$form.valid.name}}">请填写有效中文姓名</view>

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

<picker
    class="item-picker wxa-input"
    mode="selector"
    range="{{genderList}}"
    value="{{gender}}"
    data-name="gender"
    data-rule="required"
    bindchange="$typeAndValidate">
        <view class="picker-text">{{filter.gender(gender) || '请选择性别'}}</view>
</picker>

<view class="item-error" wx:if="{{$form.dirty && !$form.valid.gender}}">请选择性别</view>

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

提交表单信息示例：

this.$validateAll().then(res => {
    if (res.valid) {
        ...
    }
}, err => {
    console.warn(err);
});

模版中使用插件

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

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

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