微信小程序表单验证form提交错误提示效果

2023年6月10日下午10:09 • JavaScript

下面将详细讲解“微信小程序表单验证form提交错误提示效果”的完整攻略。

什么是微信小程序表单验证

表单验证是网站开发中的重要一环，目的是为了让用户在填写表单时能够及时的发现并纠正错误，保证数据的准确性。同样，微信小程序中也需要进行表单验证。

微信小程序表单验证的原理与网站表单验证类似，即使用户在填写表单时有错误输入，也应该及时给予提示，防止用户在数据提交时出现错误。微信小程序表单验证可以通过正则表达式、微信API等方式实现。

如何实现微信小程序表单验证

在微信小程序中实现表单验证可以通过以下步骤实现：

为表单元素添加事件监听，如bindblur,bindinput,bindchange等。
在事件处理函数中根据表单元素的值进行验证，并在验证失败时调用wx.showToast()或wx.showModal()方法进行提示。

例如下面的代码示例实现了一个简单的用户注册表单验证：

<view class="form">
  <input placeholder="请输入手机号" type="number" bind:blur="checkPhone" data-name="手机号"/>
  <input placeholder="请输入密码" type="password" bind:blur="checkPassword" data-name="密码"/>
  <button bindtap="submitForm">提交</button>
</view>

Page({
  data: {
    phone_value: '',
    password_value: '',
  },
  checkPhone: function(e) {
    var phone = e.detail.value;
    if (!/^1[3456789]\d{9}$/.test(phone)) {
      wx.showToast({
        title: e.target.dataset.name + '不正确',
        icon: 'none'
      });
      return false;
    }
    this.setData({
      phone_value: phone
    });
  },
  checkPassword: function(e) {
    var password = e.detail.value;
    if (password.length < 8) {
      wx.showToast({
        title: e.target.dataset.name + '长度不足',
        icon: 'none'
      })
      return false;
    }
    this.setData({
      password_value: password
    });
  },
  submitForm: function() {
    if (this.data.phone_value === '') {
      wx.showToast({
        title: '手机号不能为空',
        icon: 'none'
      });
      return false;
    }
    if (this.data.password_value === '') {
      wx.showToast({
        title: '密码不能为空',
        icon: 'none'
      });
      return false;
    }
    //TODO 提交表单数据
    wx.showToast({
      title: '注册成功'
    });
  }
})

在上面的代码中，我们用checkPhone和checkPassword方法分别验证了手机号和密码的格式、长度等问题，如果出现错误则调用wx.showToast()方法给予提示，否则将验证通过的值存储在data中供提交时使用。

示例说明

下面给出两个示例说明：

示例一：验证购买数量

假设我们需要验证一个购买物品的数量是否在一定范围内（如1~10之间），可以按照以下步骤实现：

在wxml文件中添加input元素，并为其添加事件监听：

html <view class="form"> <input type="number" placeholder="购买数量" bind:blur="checkNum" data-name="购买数量"/> </view>

在Page的js文件中实现checkNum方法，并在其中进行购买数量的验证：

javascript checkNum: function(e) { var num = parseInt(e.detail.value); if (isNaN(num) || num < 1 || num > 10) { wx.showToast({ title: e.target.dataset.name + "必须在1~10之间", icon: 'none' }); return false; } this.setData({ num: num }); }

在提交表单时，判断表单元素num的值是否存在，如果不存在则调用wx.showToast()方法进行错误提示，否则进行数据提交。

javascript submitForm: function() { if (!this.data.num) { wx.showToast({ title: '请填写购买数量', icon: 'none' }); return false; } //TODO 提交表单数据 wx.showToast({ title: '购买成功' }); }

示例二：验证邮箱地址

假设我们需要验证一个邮箱地址是否正确，可以按照以下步骤实现：

在wxml文件中添加input元素，并为其添加事件监听：

html <view class="form"> <input type="email" placeholder="邮箱地址" bind:blur="checkEmail" data-name="邮箱地址"/> </view>

在Page的js文件中实现checkEmail方法，并在其中进行邮箱地址的验证：

javascript checkEmail: function(e) { var email = e.detail.value; if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$/.test(email)) { wx.showToast({ title: e.target.dataset.name + "不正确", icon: 'none' }); return false; } this.setData({ email: email }); }

在提交表单时，判断表单元素email的值是否存在，如果不存在则调用wx.showToast()方法进行错误提示，否则进行数据提交。

javascript submitForm: function() { if (!this.data.email) { wx.showToast({ title: '请填写邮箱地址', icon: 'none' }); return false; } //TODO 提交表单数据 wx.showToast({ title: '提交成功' }); }