小程序中实现表单校验

前言

最近做小程序时，做了一个有关表单提交的功能，因此去网上找了相关的知识，整理过后实现了表单校验功能

工具类

WxValidate下载地址和文档地址

具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js

小程序表单代码如下（wepy版）

页面

  <view class="agent-info-box">
    <van-cell-group>
      <van-field
        required
        bind:change="changeUserName"
        value="{{agentForm.username}}"
        label="联系人"
        type="textarea"
        placeholder="请输入代理人姓名"
        autosize
      ></van-field>
      <van-field
        required
        bind:change="changePhone"
        value="{{agentForm.phone}}"
        label="手机号"
        type="number"
        placeholder="请输入代理手机号"
        autosize
      ></van-field>
      <van-field
        required
        bind:change="changeCity"
        value="{{agentForm.cityName}}"
        label="城市"
        placeholder="请输入城市"
        readonly
        right-icon="arrow"
        bind:click-input="showCity"
        bind:click-icon="showCity"
        autosize
      >
      </van-field>

      <van-field
        required
        bind:change="changeType"
        value="{{agentForm.isFixedName}}"
        label="类型"
        placeholder="请选择类型"
        readonly
        right-icon="arrow"
        bind:click-input="showType"
        bind:click-icon="showType"
        autosize
      >
      </van-field>
      <van-field
        bind:change="changeAddress"
        required="{{agentForm.isFixed == 1}}"
        value="{{agentForm.address}}"
        label="地址"
        type="textarea"
        placeholder="例:6号楼3单元711室"
        autosize
      ></van-field>
    </van-cell-group>
    <van-action-sheet
      title="城市"
      show="{{ cityShow }}"
      actions="{{ cityArr }}"
      cancel-text="取消"
      bind:select="changeCity"
      bind:cancel="closeCity"
      bind:close="closeCity"
    />
    <van-action-sheet
      title="类型"
      show="{{ typeShow }}"
      actions="{{ typeArr }}"
      cancel-text="取消"
      bind:select="changeType"
      bind:cancel="closeType"
      bind:close="closeType"
    />
    <van-button
      bindtap="saveTrade"
      round
      size="large"
    >提交</van-button>
    <van-toast id="van-toast" />
  </view>

import WxValidate from '../../utils/WxValidate-bak.js';
export default class AgentInfo extends wepy.page {
data = {
    agentForm: { // 代理form表单
      username: '',
      isFixed: '',
      phone: '',
      city: '',
      roleId: '',
      address: '',
      isFixedName: '',
      cityName: ''
    },
rules: {
      username: {
        required: true
      },
      phone: {
        required: true,
        tel: true
      },
      city: {
        required: true
      },
      isFixed: {
        required: true
      }
    },
 messages: {
      username: {
        required: '请输入代理人姓名'
      },
      phone: {
        required: '请输入手机号',
        tel: '请输入正确的手机号'
      },
      isFixed: {
        required: '请选择城市'
      },
      type: {
        required: '请选择类型'
      }
    }
 }
methods: {
   saveTrade() {
      this.wxValidate = new WxValidate(this.rules, this.messages);
      if (!this.wxValidate.checkForm(this.agentForm)) {
        let error = this.wxValidate.errorList[0];
        if (error) {
          Toast.fail(error.msg);
        }
      } else {
        this.agentForm.memberId = this.$parent.globalData.userInfo.id;
        insertTwoAgent(this.agentId, this.agentForm).then(res => {
          if (res.code === 200) {
            Toast.success('保存成功');
            setTimeout(() => {
              wepy.switchTab({
                url: '/pages/category/category'
              });
            }, 3000);
          }
        });
      }
    }
}
}