微信小程序使用vantui组件 表单提交功能

通过使用组件 实现双向绑定值 正则判断内容 再将内容提交

创建表单输入框和按钮。

<van-cell-group>用于包裹表单项，提供样式和布局。

<van-field>是一个输入框组件，其中的model:value属性用于双向绑定输入框的值到指定的数据变量。clearable属性表示输入框右侧显示清空按钮，placeholder属性用于设置输入框的占位提示文本，required属性表示该输入框为必填项。bind:change事件绑定了onNameChange和onPhoneChange函数，用于在输入框内容改变时触发相应的事件处理函数。

wxml

<van-cell-group>
    <van-field
      model:value="{{ username }}"
      clearable
      placeholder="姓名"
      required
      bind:change="onNameChange"
    />
    <van-field
      model:value="{{ phone }}"
      type="phone"
      placeholder="手机号"
      required
      bind:change="onPhoneChange"
    />
  </van-cell-group>
  <navigator url="">
    <view class="click" bindtap="goAppoint">立即预约</view>
  </navigator>

wxjs

data: {
    username:'',
    phone:'',
}
 // 监听名字输入框的change事件
  onNameChange(event) {
    // console.log(event.detail,'event.detail');
    this.setData({
      username: event.detail
    });
  },

  // 监听手机号输入框的change事件
  onPhoneChange(event) {
    this.setData({
      phone: event.detail
    });
  },
async goAppoint(){
    if (!this.data.username.trim()) { // 如果名字为空或只有空格
      wx.showToast({
        title: '请填写姓名',
        icon: 'none'
      });
      return;
    }
    if (!/^1[3-9]\d{9}$/.test(this.data.phone)) { // 如果手机号格式不正确
      wx.showToast({
        title: '请填写正确的手机号',
        icon: 'none'
      });
      return;
    }
    // 执行预约逻辑
}

wxss

.van-cell:first-child{
  border-radius: 60rpx;
}
.van-cell:last-child{
  margin-bottom: 30rpx!important;
}