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

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


  
    {{titleInfo}}
  
  
    
        
            
              
              用户名:
            
        
        
            
        
    
    
        
            
              
              密码:
            
        
        
            
        
    
    
        
          
          确认密码:
        
        
            
        
    
    
        
          
          真实姓名:
        
        
            
        
    
    
        
          
          手机号:
        
        
            
        
    
  
  
      
  

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
    });
  } 
})

 

你可能感兴趣的:(微信小程序简单个人信息表单页面)