用uniapp写一个小程序的表单提交功能

好的，以下是一个使用uniapp实现表单提交的例子。

1. 在`pages`文件夹下创建一个名为`form`的页面。

2. 在`form`页面的`template`标签中，编写表单的HTML代码。例如：

<template>
  <view class="container">
    <form @submit.prevent="submitForm">
      <view class="form-group">
        <label for="name">姓名:</label>
        <input id="name" type="text" v-model.trim="formData.name" required>
      </view>
      <view class="form-group">
        <label for="phone">手机号:</label>
        <input id="phone" type="tel" v-model.trim="formData.phone" required>
      </view>
      <view class="form-group">
        <label for="email">邮箱:</label>
        <input id="email" type="email" v-model.trim="formData.email" required>
      </view>
      <button type="submit">提交</button>
    </form>
  </view>
</template>

在上面的代码中，我们使用了`v-model`指令来获取用户输入的数据，并使用`required`属性来设置必填项。

3. 在`form`页面的`script`标签中，定义表单数据的初始值和提交表单的方法。例如：

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        email: ''
      }
    }
  },
  methods: {
    submitForm() {
      // 验证表单数据
      if (!this.formData.name) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      if (!this.formData.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      if (!this.isValidPhone(this.formData.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        })
        return
      }
      if (!this.formData.email) {
        uni.showToast({
          title: '请输入邮箱',
          icon: 'none'
        })
        return
      }
      if (!this.isValidEmail(this.formData.email)) {
        uni.showToast({
          title: '邮箱格式不正确',
          icon: 'none'
        })
        return
      }
      
      // 提交表单数据
      uni.showLoading({
        title: '提交中...'
      })
      uni.request({
        url: 'http://example.com/submit',
        method: 'POST',
        data: this.formData,
        success: (res) => {
          uni.hideLoading()
          uni.showToast({
            title: '提交成功'
          })
        },
        fail: (err) => {
          uni.hideLoading()
          uni.showToast({
            title: '提交失败',
            icon: 'none'
          })
        }
      })
    },
    isValidPhone(phone) {
      // 验证手机号格式
      // ...
      return true
    },
    isValidEmail(email) {
      // 验证邮箱格式
      // ...
      return true
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为`submitForm`的方法来提交表单数据。在该方法中，我们先进行表单数据的验证，如果有任何一项数据验证不通过，则会在页面上弹出错误提示；如果所有数据验证通过，则会通过`uni.request`方法向后端API发送POST请求，提交表单数据。在请求成功或失败后，我们会在页面上弹出相应的提示。

4. 最后，在`form`页面的`style`标签中，添加一些样式，美化表单的显示效果。例如：

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.form-group {
  display: flex;
  width: 100%;
  margin-bottom: 10rpx;
}

label {
  width: 80rpx;
  font-size: 28rpx;
  color: #333;
  text-align: right;
  margin-right: 20rpx;
}

input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  padding: 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  outline: none;
}

button {
  width: 100%;
  height: 80rpx;
  font-size: 32rpx;
  color: #fff;
  background-color: #007aff;
  border: none;
  border-radius: 5rpx;
  outline: none;
  margin-top: 20rpx;
}
</style>

好了，这样就完成了一个基本的表单提交功能。当用户输入表单数据并点击提交按钮时，我们会先进行数据验证，然后通过API将数据提交到后端服务器。在请求成功或失败后，会在页面上弹出相应的提示。