微信小程序实现表单验证源码

1. 准备工作
   首先需要准备微信小程序开发环境，下载并安装微信web开发者工具。在微信开发者工具中新建一个小程序项目。

2. 创建表单页面
   在微信开发者工具中，创建一个新的页面作为表单页面。可以使用 WXML 语言编写页面结构，使用 WXSS 语言编写页面样式。

3. 表单验证
   使用 JavaScript 代码对表单进行验证。可以在表单提交时将数据传递给验证函数。

示例代码：

// 获取表单控件的值
const username = this.data.username;
const password = this.data.password;

// 验证用户名输入是否为空
if (username === '') {
  wx.showToast({
    title: '请输入用户名',
    icon: 'none',
    duration: 2000
  });
  return;
}

// 验证密码输入是否为空
if (password === '') {
  wx.showToast({
    title: '请输入密码',
    icon: 'none',
    duration: 2000
  });
  return;
}

// 验证输入是否符合要求
if (username.length < 6 || username.length > 20) {
  wx.showToast({
    title: '用户名长度不符合要求',
    icon: 'none',
    duration: 2000
  });
  return;
}

if (password.length < 6 || password.length > 20) {
  wx.showToast({
    title: '密码长度不符合要求',
    icon: 'none',
    duration: 2000
  });
  return;
}

// 表单验证通过，可以提交数据
submitData();

1. 提交表单数据
   当表单数据通过验证后，可以将数据提交到后台服务器。可以使用微信小程序提供的 wx.request() 调用后台API。

示例代码：

// 提交数据函数
function submitData() {
  wx.request({
    url: 'http://example.com/api/save-data',
    method: 'POST',
    data: {
      username: this.data.username,
      password: this.data.password
    },
    success: function(res) {
      wx.showToast({
        title: '提交成功',
        icon: 'success',
        duration: 2000
      });
    },
    fail: function(res) {
      wx.showToast({
        title: '提交失败',
        icon: 'none',
        duration: 2000
      });
    }
  })
}

1. 完整示例代码

<!-- 表单页面 WXML 代码 -->
<view class="form">
  <view class="input-group">
    <input type="text" placeholder="请输入用户名" bindinput="inputUsername" />
  </view>
  <view class="input-group">
    <input type="password" placeholder="请输入密码" bindinput="inputPassword" />
  </view>
  <view class="button-group">
    <button bindtap="submitForm">提交</button>
  </view>
</view>

/* 表单页面 WXSS 代码 */
.form {
  width: 100%;
  height: 100%;
  padding: 20rpx;
}

.input-group {
  margin-bottom: 20rpx;
}

.input-group input {
  width: 100%;
  height: 50rpx;
  padding: 10rpx;
  font-size: 28rpx;
}

.button-group {
  text-align: center;
}

.button-group button {
  width: 300rpx;
  height: 100rpx;
  background-color: #337ab7;
  color: #fff;
  font-size: 36rpx;
  border: none;
  border-radius: 10rpx;
}

/* 表单页面 js 代码 */
Page({
  data: {
    username: '',
    password: ''
  },
  inputUsername: function(event) {
    this.setData({
      username: event.detail.value
    });
  },
  inputPassword: function(event) {
    this.setData({
      password: event.detail.value
    });
  },
  submitForm: function() {
    // 获取表单控件的值
    const username = this.data.username;
    const password = this.data.password;

    // 验证用户名输入是否为空
    if (username === '') {
      wx.showToast({
        title: '请输入用户名',
        icon: 'none',
        duration: 2000
      });
      return;
    }

    // 验证密码输入是否为空
    if (password === '') {
      wx.showToast({
        title: '请输入密码',
        icon: 'none',
        duration: 2000
      });
      return;
    }

    // 验证输入是否符合要求
    if (username.length < 6 || username.length > 20) {
      wx.showToast({
        title: '用户名长度不符合要求',
        icon: 'none',
        duration: 2000
      });
      return;
    }

    if (password.length < 6 || password.length > 20) {
      wx.showToast({
        title: '密码长度不符合要求',
        icon: 'none',
        duration: 2000
      });
      return;
    }

    // 表单验证通过，可以提交数据
    submitData();
  }
});

// 提交数据函数
function submitData() {
  wx.request({
    url: 'http://example.com/api/save-data',
    method: 'POST',
    data: {
      username: this.data.username,
      password: this.data.password
    },
    success: function(res) {
      wx.showToast({
        title: '提交成功',
        icon: 'success',
        duration: 2000
      });
    },
    fail: function(res) {
      wx.showToast({
        title: '提交失败',
        icon: 'none',
        duration: 2000
      });
    }
  })
}

以上代码实现了简单的表单验证和数据提交功能，在实际应用中可以根据需求进行修改和扩展。