微信小程序：提交表单的字段必填限制

效果

说明

该例子涉及到的知识点

1、通过data-key统一处理input的触发事件，设值

2、时间选择器

3、必填字段数组整合

4、字段映射（设置提示信息为自定义文字）

5、防表单多次提交(使用自带的加载框showLoading）

代码

wxml

<view class="line1_1_input">
  <input type="text" value="{{formValues.input1}}" data-key="input1" placeholder="请输入文本1" bindinput="onInput" />
</view>
<view class="line1_1_input">
  <input type="text" value="{{formValues.input2}}" data-key="input2" placeholder="请输入文本2" bindinput="onInput" />
</view>
<view class="line1_1_input">
  <input type="text" value="{{formValues.input3}}" data-key="input3" placeholder="请输入文本3" bindinput="onInput" />
</view>
<view class="line1_1_input">
  <picker mode="date" value="{{formValues.birthDate}}" bindchange="onBirthDateChange">
    <view class="pickertext">
      <text style="color: {{formValues.birthDate == '请选择' ? '#8d8d8d' : ''}}">{{formValues.birthDate}}</text>
    </view>
  </picker>
</view>
<!-- 按钮 -->
<view class="Btn_layout">
  <view class="Btn_op" bindtap="submitForm">提交</view>
</view>

wxss

.line1_1_input {
  height: 60rpx;
  border: 1px solid black;
  margin: 5px 0;
}

picker {
  width: 100%;
}

.pickertext,
input {
  height: 60rpx;
  display: flex;
  align-items: center;
}

/* 提交按钮 */
.Btn_layout {
  margin-top:5%;
  width: 100%;
}

/* 按钮 */
.Btn_op {
  width: 100%;
  height:60rpx;
  display: flex; 
  justify-content: center;
  align-items: center;
  background-color: #6ca8f7;
  color: #fff;
  letter-spacing: 2px;
}

js

Page({
  data: {
    // 表单字段
    formValues: {
      input1: '', //文本1
      input2: '', //文本2
      input3: '', //文本3
      birthDate: '请选择', //出生年月
    },
    // 必填字段数组
    requiredFields: [
      'input1', 'birthDate'
    ],
    // 字段别名映射
    fieldAliases: { 
      input1: '文本1',
      input2: '文本2',
      input3: '文本3',
      birthDate: '日期',
    },
  },
  //出生日期
  onBirthDateChange: function (e) {
    const selectedDate = e.detail.value; //获取选择数据
    this.setData({
      [`formValues.birthDate`]: selectedDate,
    });
  },
  //文本输入框
  onInput: function (e) {
    const key = e.currentTarget.dataset.key;
    const value = e.detail.value;
    this.setData({
      [`formValues.${key}`]: value
    });
  },
  //提交
  submitForm(event) {
    var that = this;
    //提交时加载提示
    wx.showLoading({
      title: '正在提交',
      mask: true, // 防止用户交互
    });
    //获取表单数据
    const formData = that.data.formValues; 
    console.log('表单数据:', formData);
    //表单是否满足提交的变量
    let isValid = true;
    //必填项判断，循环必填字段数组，用every类似foreach，但能很好的解决跳出循环问题
    that.data.requiredFields.every(item => {
      //获取字段映射
      var fieldAliases = that.data.fieldAliases;
      //判单表单中的这个字段是否为空或者为‘请选择’，如果是表明就是必填字段未填
      if (formData[item] == '' || formData[item] == '请选择') {
        wx.hideLoading(); // 如果验证不通过，立即隐藏加载提示框
        //提示信息
        wx.showToast({
          title: `${fieldAliases[item]} 不能为空`,
          icon: 'none',
          duration:1000
        });
        //禁止提交标识
        isValid = false;
        // 返回false，some会停止遍历
        return false; 
      }
      // 继续遍历
      return true;
    });
    // 表单验证通过，可以提交表单
    if (isValid) {
      //表单信息处理
      // ...
      wx.hideLoading(); // 如果验证不通过，立即隐藏加载提示框
    }
  },
});