微信官方表单验证及提交
<view class="page"><mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips><mp-form-page title="表单结构" subtitle="展示表单页面。"><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="表单"><mp-cell show-error prop="name" title="姓名" ext-class=""><input bindinput="formInputChange" data-field="name" class="weui-input" placeholder="请输入姓名" /></mp-cell><mp-cell show-error prop="mobile" title="手机号" ext-class=" weui-cell_vcode"><input bindinput="formInputChange" data-field="mobile" class="weui-input" placeholder="请输入手机号" /><button slot="footer" type="default" class="weui-vcode-btn">获取验证码</button></mp-cell><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><checkbox-group slot="tips" bindchange="bindAgreeChange"><label class="weui-agree"><checkbox class="weui-agree__checkbox-check" /><text class="weui-agree__checkbox"></text><view class="weui-agree__text">阅读并同意<navigator>《相关条款》</navigator></view></label></checkbox-group><view slot="button"><button class="weui-btn" type="primary" bindtap="submitForm">确定</button></view></mp-form-page>
</view>
Page({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' }],isAgree: false,formData: {},rules: [{name: 'radio',rules: { required: false, message: '单选列表是必选项' },}, {name: 'checkbox',rules: { required: true, message: '多选列表是必选项' },}, {name: 'name',rules: { required: true, message: '请输入姓名' },}, {name: 'mobile',rules: [{ required: true, message: 'mobile必填' }, { mobile: true, message: 'mobile格式不对' }],}, {name: 'idcard',rules: {validator(rule, value) {if (!value || value.length !== 18) {return 'idcard格式不正确'}return ''}},}]},radioChange(e) {console.log('radio发生change事件，携带value值为：', e.detail.value)const radioItems = this.data.radioItemsfor (let i = 0, len = radioItems.length; i < len; ++i) {radioItems[i].checked = radioItems[i].value === e.detail.value}this.setData({radioItems,'formData.radio': e.detail.value})},checkboxChange(e) {console.log('checkbox发生change事件，携带value值为：', e.detail.value)const checkboxItems = this.data.checkboxItems;const values = e.detail.valuefor (let i = 0, lenI = checkboxItems.length; i < lenI; ++i) {checkboxItems[i].checked = falsefor (let j = 0, lenJ = values.length; j < lenJ; ++j) {if (checkboxItems[i].value === values[j]) {checkboxItems[i].checked = truebreak}}}this.setData({checkboxItems,'formData.checkbox': e.detail.value})},formInputChange(e) {const { field } = e.currentTarget.datasetthis.setData({[`formData.${field}`]: e.detail.value})},//同意协议bindAgreeChange(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: '校验通过'})}})}
})
{"usingComponents": {"mp-form-page": "weui-miniprogram/form-page/form-page","mp-toptips": "weui-miniprogram/toptips/toptips","mp-cells": "weui-miniprogram/cells/cells","mp-cell": "weui-miniprogram/cell/cell","mp-checkbox": "weui-miniprogram/checkbox/checkbox","mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group","mp-form": "weui-miniprogram/form/form"}
}
