完善好看一点要手机号，密码邮箱

创建一个美观且实用的“手机号、密码、邮箱”注册页面，通常会包含以下几个步骤：

1. **设计布局**:
- 使用响应式设计，适应不同屏幕尺寸。比如，可以使用栅格系统确保各个元素在不同设备上均保持整洁。
- 颜色搭配要清爽，可以选择淡色调，如白色背景配合深色字体。

<!-- index.wxml -->
<view class="register-form">
  <view class="form-item">
    <label for="phone">手机号：</label>
    <input type="tel" id="phone" placeholder="请输入手机号码" required/>
  </view>
  <view class="form-item">
    <label for="password">密码：</label>
    <input type="password" id="password" placeholder="设置6-20位密码" required/>
  </view>
  <view class="form-item">
    <label for="email">邮箱：</label>
    <input type="email" id="email" placeholder="请输入邮箱地址" required/>
  </view>
  <button class="submit-btn" bindtap="registerUser">立即注册</button>
</view>

2. **添加提示信息**:
提供实时反馈，例如输入验证错误时显示红色边框或文本。

3. **样式定制**:
使用CSS定义样式，比如圆角、间距和动画效果，提高视觉吸引力。

.register-form {
  background-color: #f8f9fa;
  padding: 20rpx;
}

.form-item label {
  font-size: 14rpx;
}

.submit-btn {
  margin-top: 20rpx;
  border-radius: 5px;
  color: #fff;
  background-color: #333;
  padding: 10rpx 20rpx;
  cursor: pointer;
}

4. **提交函数**:
在JavaScript中处理表单数据，并进行必要的验证，如果满足条件，则可以调用API进行注册。

Page({
  registerUser: function(e) {
    var phone = this.selectComponent('#phone').value;
    var password = this.selectComponent('#password').value;
    var email = this.selectComponent('#email').value;

    // 进行数据清洗和验证
    if (!validate(phone, password, email)) {
      wx.showToast({
        title: '请输入有效信息',
        icon: 'none'
      });
      return;
    }

    // 发送注册请求到服务器...
  }
})