微信小程序简单个人信息表单页面

wxml部分：这里引用的icon小图标可以自主更换

<view>
  <view class="titleCss">
    <text class="titleTextCss">{{titleInfo}}</text>
  </view>
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
            <view class="weui-label labelCss">
              <image src="../../icon/user_red.png" class="iconCss"></image>
              <text class="textCss">用户名:</text>
            </view>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入用户名"/>
        </view>
    </view>
    <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
            <view class="weui-label labelCss">
              <image src="../../icon/password.png" class="iconCss"></image>
              <text class="textCss">密码:</text>
            </view>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入密码" password bindinput="passwordInput" focus="{{password_show}}"/>
        </view>
    </view>
    <view class="weui-cell weui-cell_input">
        <view class="weui-label labelCss">
          <image src="../../icon/safety.png" class="iconCss"></image>
          <text class="textCss">确认密码:</text>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请确认密码" password bindinput="passwordCheckInput"/>
        </view>
    </view>
    <view class="weui-cell weui-cell_input">
        <view class="weui-label labelCss">
          <image src="../../icon/realName.png" class="iconCss"></image>
          <text class="textCss">真实姓名:</text>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入用户姓名"/>
        </view>
    </view>
    <view class="weui-cell weui-cell_input">
        <view class="weui-label labelCss">
          <image src="../../icon/phone.png" class="iconCss"></image>
          <text class="textCss">手机号:</text>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入用户手机号" type="number"/>
        </view>
    </view>
  </view>
  <view class="page__bd page__bd_spacing addBnCss">
      <button class="weui-btn" type="primary" bindtap="addUser">确定</button>
  </view>
</view>

wxss部分：在这里引入weui.wxss文件，地址：https://files.cnblogs.com/files/qianyou304/weui.rar，如果改地址不行，则可以百度直接搜哈！

@import '../../lib/weui.wxss';

.titleCss{
   100%;
  height: 15vh;
  text-align: center;
}
.titleTextCss{
  font-size: 40rpx;
  line-height: 15vh;
}
.addBnCss{
  margin-top:10vh;
}
.iconCss{
   3.5vh;
  height: 3.5vh;
}
.labelCss{
  display: flex;
}
.textCss{
  font-size: 32rpx;
  margin-left: 1vh;
  line-height: 3.5vh;
}
.inputCss{
  margin-left: 2vh;
}
.place-holder{
  font-size: 28rpx;
}

js部分：

// pages/addOrEditUser/addOrEditUser.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    titleInfo: "添加新用户信息",
    password: "",
    password_check: "",
    password_show: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  addUser: function(){
    var that = this;
    var password = that.data.password;
    var password_check = that.data.password_check;
    if(password == password_check){
      
    }else{
      wx.showModal({
        title: '提示',
        content: '对不起！您输入的两次密码不同！',
        success(res) {
          if (res.confirm) {
            that.setData({
              password_show: true
            });
          } else if (res.cancel) {
            that.setData({
              password_show: false
            });
          }
        }
      })
    }
  },
  passwordInput: function (e) {
    this.setData({
      password: e.detail.value
    });
  },
  passwordCheckInput: function (e) {
    this.setData({
      password_check: e.detail.value
    });
  } 
})