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

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

    });

  }

})