⼩程序简单个⼈信息表单页⾯
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⽂件，地址：，如果改地址不⾏，则可以百度直接搜哈！
@import '../../lib/weui.wxss';
.titleCss{
width: 100%;
height: 15vh;
text-align: center;
}
.titleTextCss{
font-size: 40rpx;
如何用css美化表单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 (firm) {
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
});
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。