微信小程序 WeUI·Form
Form
Form表单组件，结合Cell、Checkbox-group、Checkbox组件等做表单校验。
示例代码：
{
"component": true,
"usingComponents": {
"mp-toptips": "../components/toptips/toptips",
"mp-cells": "../components/cells/cells",
"mp-cell": "../components/cell/cell",
"mp-checkbox": "../components/checkbox/checkbox",
"mp-checkbox-group": "../components/checkbox-group/checkbox-group",
"mp-form": "../components/form/form"
}
}<mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
<view class="page__hd">
<view class="page__title">Form</view>
<view class="page__desc">表单输入</view>
</view>
<view class="page__bd">
<mp-form id="form" rules="{{rules}}" models="{{formData}}">
<mp-cells title="单选列表项">
<mp-checkbox-group prop="radio" multi="{{false}}" bindchange="radioChange">
<mp-checkbox wx:for="{{radioItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
</mp-checkbox-group>
</mp-cells>
<mp-cells title="复选列表项">
<mp-checkbox-group prop="checkbox" multi="{{true}}" bindchange="checkboxChange">
<mp-checkbox wx:for="{{checkboxItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
</mp-checkbox-group>
</mp-cells>
<mp-cells title="表单" footer="底部说明文字底部说明文字">
<mp-cell prop="qq" title="qq" ext-class="">
<input bindinput="formInputChange" data-field="qq" class="weui-input" placeholder="请输入qq"/>
</mp-cell>
<mp-cell prop="mobile" title="手机号" ext-class=" weui-cell_vcode">
<input bindinput="formInputChange" data-field="mobile" class="weui-input" placeholder="请输入手机号"/>
<view slot="footer" class="weui-vcode-btn">获取验证码</view>
</mp-cell>
<mp-cell prop="date" title="日期" ext-class="">
<picker data-field="date" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="weui-input">{{date}}</view>
</picker>
</mp-cell>
<mp-cell prop="vcode" title="验证码" ext-class=" weui-cell_vcode">
<input bindinput="formInputChange" data-field="vcode" class="weui-input" placeholder="请输入验证码"/>
<image slot="footer" class="weui-vcode-img" src="../images/vcode.jpg" style="width: 108px"></image>
</mp-cell>
</mp-cells>
<mp-cells title="提交后表单项报错">
<mp-cell show-error prop="idcard" title="卡号" ext-class="">
<input bindinput="formInputChange" data-field="idcard" class="weui-input" placeholder="请输入卡号"/>
</mp-cell>
</mp-cells>
</mp-form>
<view class="weui-cells__title">开关</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">标题文字</view>
<view class="weui-cell__ft">
<switch checked />
</view>
</view>
</view>
<view class="weui-cells__title">文本框</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入文本" />
</view>
</view>
</view>
<view class="weui-cells__title">文本域</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<view class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请输入文本" style="height: 3.3em" />
<view class="weui-textarea-counter">0/200</view>
</view>
</view>
</view>
<view class="weui-cells__title">选择</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_select">
<view class="weui-cell__hd" style="width: 105px">
<picker bindchange="bindCountryCodeChange" value="{{countryCodeIndex}}" range="{{countryCodes}}">
<view class="weui-select">{{countryCodes[countryCodeIndex]}}</view>
</picker>
</view>
<view class="weui-cell__bd weui-cell__bd_in-select-before">
<input class="weui-input" placeholder="请输入号码" />
</view>
</view>
</view>
<view class="weui-cells__title">选择</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_select">
<view class="weui-cell__bd">
<picker bindchange="bindAccountChange" value="{{accountIndex}}" range="{{accounts}}">
<view class="weui-select">{{accounts[accountIndex]}}</view>
</picker>
</view>
</view>
<view class="weui-cell weui-cell_select">
<view class="weui-cell__hd weui-cell__hd_in-select-after">
<view class="weui-label">国家/地区</view>
</view>
<view class="weui-cell__bd">
<picker bindchange="bindCountryChange" value="{{countryIndex}}" range="{{countries}}">
<view class="weui-select weui-select_in-select-after">{{countries[countryIndex]}}</view>
</picker>
</view>
</view>
</view>
<checkbox-group bindchange="bindAgreeChange">
<label class="weui-agree" for="weuiAgree">
<view class="weui-agree__text">
<checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{isAgree}}" />
<view class="weui-agree__checkbox-icon">
<icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
</view>
阅读并同意<navigator url="" class="weui-agree__link">《相关条款》</navigator>
</view>
</label>
</checkbox-group>
<view class="weui-btn-area">
<button class="weui-btn" type="primary" bindtap="submitForm">确定</button>
</view>
</view>
</view>Component({
data: {
showTopTips: false,
radioItems: [
{name: 'cell standard', value: '0', checked: true},
{name: 'cell standard', value: '1'}
],
checkboxItems: [
{name: 'standard is dealt for u.', value: '0', checked: true},
{name: 'standard is dealicient for u.', value: '1'}
],
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'},
],
date: "2016-09-01",
time: "12:01",
countryCodes: ["+86", "+80", "+84", "+87"],
countryCodeIndex: 0,
countries: ["中国", "美国", "英国"],
countryIndex: 0,
accounts: ["微信号", "QQ", "Email"],
accountIndex: 0,
isAgree: false,
formData: {
},
rules: [{
name: 'radio',
rules: {required: true, message: '单选列表是必选项'},
}, {
name: 'checkbox',
rules: {required: true, message: '多选列表是必选项'},
}, {
name: 'qq',
rules: {required: true, message: 'qq必填'},
}, {
name: 'mobile',
rules: [{required: true, message: 'mobile必填'}, {mobile: true, message: 'mobile格式不对'}],
}, {
name: 'vcode',
rules: {required: true, message: '验证码必填'},
}, {
name: 'idcard',
rules: {required: true, message: 'idcard必填'},
}]
},
methods: {
radioChange: function (e) {
console.log('radio发生change事件，携带value值为：', e.detail.value);
var radioItems = this.data.radioItems;
for (var i = 0, len = radioItems.length; i < len; ++i) {
radioItems[i].checked = radioItems[i].value == e.detail.value;
}
this.setData({
radioItems: radioItems,
[`formData.radio`]: e.detail.value
});
},
checkboxChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value);
var checkboxItems = this.data.checkboxItems, values = e.detail.value;
for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
checkboxItems[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if(checkboxItems[i].value == values[j]){
checkboxItems[i].checked = true;
break;
}
}
}
this.setData({
checkboxItems: checkboxItems,
[`formData.checkbox`]: e.detail.value
});
},
bindDateChange: function (e) {
this.setData({
date: e.detail.value,
[`formData.date`]: e.detail.value
})
},
formInputChange(e) {
const {field} = e.currentTarget.dataset
this.setData({
[`formData.${field}`]: e.detail.value
})
},
bindTimeChange: function (e) {
this.setData({
time: e.detail.value
})
},
bindCountryCodeChange: function(e){
console.log('picker country code 发生选择改变，携带值为', e.detail.value);
this.setData({
countryCodeIndex: e.detail.value
})
},
bindCountryChange: function(e) {
console.log('picker country 发生选择改变，携带值为', e.detail.value);
this.setData({
countryIndex: e.detail.value
})
},
bindAccountChange: function(e) {
console.log('picker account 发生选择改变，携带值为', e.detail.value);
this.setData({
accountIndex: e.detail.value
})
},
bindAgreeChange: function (e) {
this.setData({
isAgree: !!e.detail.value.length
});
},
submitForm() {
this.selectComponent('#form').validate((valid, errors) => {
console.log('valid', valid, errors)
if (!valid) {
const firstError = Object.keys(errors)
if (firstError.length) {
this.setData({
error: errors[firstError[0]].message
})
}
} else {
wx.showToast({
title: '校验通过'
})
}
})
}
}
});
属性列表
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| ext-class | string | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | |
| rules | object<array> | 否 | 表单校验的规则列表，格式下面详细介绍 | |
| models | object | 否 | 需要校验的表单的数据 | |
| bindsuccess | eventhandler | 否 | 校验成功触发的事件，detail是{trigger}，trigger的值是change或validate，表示是输入改成触发的校验还是主动调用的validate接口 | |
| bindfail | eventhandler | 否 | 校验失败触发的事件，detail是{trigger, errors}，trigger的值是change或validate，表示是输入改成触发的校验还是主动调用的validate接口。errors是错误的字段列表。 |
rules是表单校验的规则列表，列表每一项表示一个字段的校验规则，注意，必须要在Cell或Checkbox-group组件声明prop属性，表单校验规则才生效，表单校验规则的定义如下：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| name | string | 是 | 校验的字段名 | |
| rules | array/object | 是 | 校验的规则，如果有多项，则是数组 | |
| rules.message | string | 否 | 校验失败时候提示的文字 | |
| rules.validator | function | 否 | 自定义校验函数，接受rule, value, param, models四个参数，其中rule格式为{name: '字段名', message: '失败信息'}, value是字段值，param是校验参数，models是form组件的models属性。函数返回错误提示，表示校验失败，错误提示会通过回调返回给开发者 | |
| rules.[rule] | string | 否 | rule是变量，表示内置的校验规则名称，比如required，则校验规则对象为{name: "fieldName", rules: {required: true}}，下面会详细介绍所有的内置规则 |
内置校验规则
| 规则名 | 参数 | 说明 |
|---|---|---|
| required | 是否必填 | |
| minlength | number | 最小长度 |
| maxlength | number | 最大长度 |
| rangelength | [number, number] | 长度范围，参数为[最小长度， 最大长度] |
| bytelength | number | 字节长度 |
| range | [number, number] | 数字的大小范围 |
| min | number | 最小值限制 |
| max | number | 最大值限制 |
| mobile | 手机号码校验 | |
| 电子邮件校验 | ||
| url | URL链接地址校验 | |
| equalTo | string | 相等校验，参数是另外一个字段名 |
接口
validate
validate接口接受类型为function的callback，callback有isValid和errors两个参数，isValid表示是否校验通过，errors在校验失败的时候的值为失败的字段列表。
validateField
validateField接口接受2个参数， 第一个是字段名，第二个是类型为function的callback，callback有isValid和errors两个参数，isValid表示是否校验通过，errors在校验失败的时候的值为失败的字段列表。
Slot
| 名称 | 描述 |
|---|---|
| 默认 | 内容slot |