May 21, 2021 WeChat Mini Program Development Document
Form form assembly, combined with Cell, Checkbox-Group, CheckBox Components, etc.
{
"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: '校验通过'
})
}
})
}
}
});
Property | Type | The default | Required | Description |
---|---|---|---|---|
ext-class | string | Whether | A class added to the internal structure of a component that can be used to modify the style inside a component | |
rules | object<array> | Whether | A list of rules for form validation, detailed below in format | |
models | object | Whether | The data for the form that needs to be verified | |
bindsuccess | eventhandler | Whether | The event that the check was successfully triggered, the detail is the "trigger", and the value of the trigger is change or validate, indicating whether the input is changed to the triggered check or the actively called validate interface | |
bindfail | eventhandler | Whether | The event triggered by the validation failure, the detail is the value of the trigger, the value of the trigger is change or validate, indicating whether the input is changed to the triggered check or the actively called validate interface. Errors is a list of fields that are wrong. |
Rules are a list of rules for form validation, each of which represents a field of validation rules, note that the prop property must be declared in the Cell or Checkbox-group component before the form check rule takes effect, and the form check rule is defined as follows:
Property | Type | The default | Required | Description |
---|---|---|---|---|
name | string | Is | The field name of the check | |
rules | array/object | Is | The validation rule, if there are more than one, is an array | |
rules.message | string | Whether | The text of the prompt when the check fails | |
rules.validator | function | Whether | Custom check function, accept rule, value, param, models four parameters, where the rule format is 'name: 'field name', message: 'failed information', value is the field value, param is the check parameter, models is the models property of the form component. The function returns an error prompt, indicating that the check failed, and the error prompt is returned to the developer through a callback | |
rules. [rule] | string | Whether | Rule is a variable that represents a built-in check rule name, such as required, and the check rule object is s name: "fieldName", rules: sneded: true, and all the built-in rules are described in more detail below |
The name of the rule | Parameters | Description |
---|---|---|
required | Is it required | |
minlength | number | Minimum length |
maxlength | number | Maximum length |
rangelength | [number, number] | Length range, parameters are .minimum length, maximum length |
bytelength | number | Byte length |
range | [number, number] | The size range of the numbers |
min | number | Minimum limit |
max | number | Maximum limit |
mobile | Mobile phone number verification | |
E-mail verification | ||
Url | URL link address check | |
equalTo | string | Equal check, the argument is another field name |
The validate interface accepts callbacks of type fusion, callback has two parameters, isValid and errors, which indicate whether the check passed and the value of the failed field when the errors failed.
The validateField interface accepts 2 parameters, the first is the field name, the second is the callback of type fusion, the callback has two parameters, isValid and errors, isValid indicates whether the check passed, and the value of the errors when the check fails is a list of failed fields.
Name | Describe |
---|---|
Default | Content slot |