微信小程序用户名、密码页面设计

.wxml页面

<view class="section">
  <form bindsubmit="bindFormSubmit" bindreset="formReset">
    <text>日期选择</text>
    <view class="textareaT" name="userName">
      <text class="textriqi">{{dateValue}}</text>
      <picker mode="date" value="{{dateValue}}" start="1999-01-01" end="2999-12-12" bindchange="datePickerBindchange">
<image class="imgrili" src="../imges/rili.png"></image>
</picker>
    </view>
    <text>申请人信息</text>
    <view class="textareaT2" name="userName">
      <view class="itemView">用户名：
        <input name="userName" placeholder="请输入用户名" bindinput="userNameInput" />
      </view>
      <view class="lineV"></view>
      <view class="itemView">密码：
        <input name="userName" placeholder="请输入密码" bindinput="pasWInput" />
      </view>
     
    </view>
    <button class="submitClick" formType="submit"> 登 录</button>
  </form>
  <view>{{tip}}</view>
  <view>{{userName}}</view>

</view>

.wxss文件

.textareaT {
  margin-top: 10px;
  height: 60rpx;
  width: 90%;
  font-size: 15px;
  display: flex;
  margin-left: 5%;
  justify-content: space-between;
  border: 1px solid darkgrey;
  border-radius: 3px;
}


.textareaT2 {
  margin-top: 10px;
  width: 90%;
  height: 340rpx;
  margin-left: 5%;
  border: 1px solid darkgrey;
  border-radius: 3px;
}


text {
  margin-top: 40rpx;
  font-size: 13px;
  color: darkgrey;
  width: 90%;
  margin-left: 5%;
}


.submitClick {
  width: 80%;
  color: white;
  background: #06a6e4;
  font-size: 14px;
  margin-top: 10px;
}


.imgrili {
  margin-right: 20rpx;
  margin-top: 10rpx;
  width: 40rpx;
  height: 40rpx;
}


.textriqi {
  margin-top: 15rpx;
  width: 60%;
  height: 30rpx;
}


.itemView {


  height: 60rpx;
  display: flex;
  justify-content: space-around;
  font-size: 13.0px;
  margin-top: 20rpx;
}
.lineV{
  width: 95%;
  height: 2rpx;
  background: darkgrey;
  display: flex;
  margin-left: 2.5%;
  justify-content: space-around;
}

.js文件

Page({
  data: {
    userName: '',
    pasWInput: '',
    dateValue:'2016-10-13'
  },
   datePickerBindchange:function(e){
    this.setData({
      dateValue:e.detail.value
    })
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },


  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  imgClick: function () {


  },
  // 用户名和密码输入框事件
  userNameInput: function (e) {
    this.setData({
      userName: e.detail.value
    })
  },
  pasWInput: function (e) {
    this.setData({
      SFZ: e.detail.value
    })
  },
 
  bindFormSubmit: function (e) {
    if (e.detail.value.userName.length == 0||e.detail.value.pasWInput.length == 0) {
      this.setData({
        tip: '提示：用户信息！',
        userName: '',
        psw: ''
      })
    } else {


    }
  },


})