[JavaScript知识库]微信官方表单验证及提交

<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.radioItems
    for (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.value
    for (let i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
      checkboxItems[i].checked = false
      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (checkboxItems[i].value === values[j]) {
          checkboxItems[i].checked = true
          break
        }
      }
    }

    this.setData({
      checkboxItems,
      'formData.checkbox': e.detail.value
    })
  },
  formInputChange(e) {
    const { field } = e.currentTarget.dataset
    this.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"
  }
}

阅读世界，共赴山海

423全民读书节，邀你共读