微信小程序簡單個人信息表單頁面

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{
  width: 100%;
  height: 15vh;
  text-align: center;
}
.titleTextCss{
  font-size: 40rpx;
  line-height: 15vh;
}
.addBnCss{
  margin-top:10vh;
}
.iconCss{
  width: 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
    });
  } 
})