微信小程序form表单登录_小程序 登录 form rules

1.首先是wxml文件布局设计

<!--pages/login/login.wxml-->
<view class='page'>
  <form bindsubmit='formSubmit' bindreset='formReset' report-submit='true'>
      <view class='set1'>
        <view>
          <text>账号：</text>
        </view>
        <view class='input'>
          <input placeholder='请输入账号' name='username'></input>
        </view>
      </view>
      <view class='set1'>
        <view>
          <text>密码：</text>
        </view>
         <view class='input'>
          <input placeholder='请输入密码' password='true' name='password'></input>
        </view>
      </view>
      <view class='btn'>
        <button form-type='submit' type='primary'>提交</button>
        <button form-type='reset'>重置</button>
      </view>
  </form>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

样式

/* pages/login/login.wxss */
.page{
  margin: 0rpx,50rpx,50rpx,50rpx;
}

.set1{
  margin: 0rpx,0rpx,50rpx,0rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.btn{
  width: 100%
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.既然是登录，就需要对用户名密码进行校验

用户名或密码为空时发出提示信息，参考API：https://developers.weixin.qq.com/miniprogram/dev/api/wx.showModal.html

 //校验
  if(username == "" || password == ""){
    wx.showModal({
      title: '提示',
      content: '不能为空',
    })
  }
1
2
3
4
5
6
7

输入的用户名需要发送给后台做校验，用户名密码正确则跳转到下一个页面pages/welecome/welecome。用户名密码错误则后台返回错误信息并提示用户名或密码错误。

用户名密码输入错误时

具体实现代码如下：

我的后台用的是Java，只是作为测试。

刚刚接触微信小程序，开始写登录时花了点时间，因为刚刚开始不太熟悉微信小程序的语法，不过参考API很快就写出来了。