微信小程序-form表单提交代码实例

微信小程序-form表单提交代码实例攻略

在微信小程序中，我们可以使用form表单来收集用户的信息，并将其提交到指定的接口进行处理。本文将详细讲解如何创建和使用form表单，在提交数据时如何处理和验证数据，以及如何处理提交的结果。

创建form表单

要创建一个form表单，我们需要在wxml文件中使用form标签，例如：

<form bindsubmit="onSubmit">
  <input name="username" type="text" placeholder="请输入用户名" />
  <input name="password" type="password" placeholder="请输入密码" />
  <button formType="submit">提交</button>
</form>

在form标签上，我们绑定了一个submit事件来处理用户提交表单的行为。在input标签中，我们设置了name属性来标识该字段的名称，以便后续处理数据时可以方便地识别和获取。

处理和验证数据

当用户提交表单时，我们可以在对应的页面js文件中定义一个函数来处理提交的数据，例如：

Page({
  onSubmit: function(e) {
    const { username, password } = e.detail.value
    if (!username || !password) {
      wx.showToast({ title: '请输入用户名和密码', icon: 'none' })
      return
    }
    // 发起网络请求
  },
})

在这个示例中，我们从事件参数e中获取提交的数据，然后进行数据验证，确保必填字段已填写。如果有任何验证失败的情况，我们通过wx.showToast方法来给用户进行提醒。如果验证通过，我们可以发起网络请求将数据提交到后端接口进行处理。

处理提交结果

当我们的小程序接收到后端处理完成的结果时，我们可以在页面js文件中定义一个函数来处理提交结果，例如：

Page({
  onSubmit: function(e) {
    // 处理提交的数据，省略不表
    wx.request({
      url: 'https://example.com/submit',
      method: 'POST',
      data: { username, password },
      success: this.onSubmitSuccess,
      fail: this.onSubmitFail,
    })
  },
  onSubmitSuccess: function(res) {
    console.log(res)
    wx.showToast({ title: '提交成功', icon: 'success' })
  },
  onSubmitFail: function(res) {
    console.error(res)
    wx.showToast({ title: '提交失败，请重试', icon: 'none' })
  },
})

在这个示例中，我们在发起网络请求时，指定了成功和失败的回调函数。当成功回调函数执行时，我们可以打印出后端返回的结果，并通过wx.showToast方法来提示用户提交成功。当失败回调函数执行时，我们打印出错误信息，并给出用户提示。

示例说明

示例1：登录表单提交

下面是一个简单的登录表单提交示例：

<form bindsubmit="onSubmit">
  <input name="username" type="text" placeholder="请输入用户名" />
  <input name="password" type="password" placeholder="请输入密码" />
  <button formType="submit">登录</button>
</form>

在提交表单时，我们需要将用户名和密码提交到后端接口进行验证。如果验证成功，我们可以将用户信息保存在本地缓存中，并跳转到另一个页面。如果验证失败，我们需要给出相应的提示信息。

Page({
  onSubmit: function(e) {
    const { username, password } = e.detail.value
    if (!username || !password) {
      wx.showToast({ title: '请输入用户名和密码', icon: 'none' })
      return
    }
    wx.request({
      url: 'https://example.com/login',
      method: 'POST',
      data: { username, password },
      success: this.onSubmitSuccess,
      fail: this.onSubmitFail,
    })
  },
  onSubmitSuccess: function(res) {
    if (res.data.code === 0) {
      wx.setStorageSync('user', res.data.user)
      wx.showToast({ title: '登录成功', icon: 'success' })
      wx.navigateTo({ url: '/pages/home/index' })
    } else {
      wx.showToast({ title: '用户名或密码错误', icon: 'none' })
    }
  },
  onSubmitFail: function(res) {
    console.error(res)
    wx.showToast({ title: '提交失败，请重试', icon: 'none' })
  },
})

在这个示例中，我们通过判断后端返回的数据是否为0来判断登录是否成功。如果成功，我们在本地缓存中保存了用户信息，并跳转到首页。如果失败，我们提交错误提示给用户。

示例2：反馈表单提交

下面是一个反馈表单提交示例：

<form bindsubmit="onSubmit">
  <input name="username" type="text" placeholder="请输入您的姓名" />
  <textarea name="content" placeholder="请输入反馈内容"></textarea>
  <button formType="submit">提交反馈</button>
</form>

在提交表单时，我们需要将用户名和反馈内容提交到后端接口进行保存。如果保存成功，我们可以给出相应的提示信息。如果保存失败，我们需要给出相应的错误提示。

Page({
  onSubmit: function(e) {
    const { username, content } = e.detail.value
    if (!username || !content) {
      wx.showToast({ title: '请输入您的姓名和反馈内容', icon: 'none' })
      return
    }
    wx.request({
      url: 'https://example.com/feedback',
      method: 'POST',
      data: { username, content },
      success: this.onSubmitSuccess,
      fail: this.onSubmitFail,
    })
  },
  onSubmitSuccess: function(res) {
    wx.showToast({ title: '反馈成功', icon: 'success' })
    // 清空表单数据
    this.setData({ username: '', content: '' })
  },
  onSubmitFail: function(res) {
    console.error(res)
    wx.showToast({ title: '提交失败，请重试', icon: 'none' })
  },
})

在这个示例中，当用户提交成功后，我们清空了表单数据。如果保存失败，我们提交错误提示给用户。