在微信小程序中设计一个登录按钮:当输入框中未输入学号和密码时提示“请输入学号和密码”,输入学号和密码时跳转到其他页面
时间: 2024-03-20 12:44:09 浏览: 68
微信小程序登录界面设计(可以登录)
可以使用微信小程序的wxml和wxss文件来设计一个登录按钮,具体实现如下:
1. 在wxml文件中添加两个文本框和一个按钮:
```html
<view class="container">
<form bindsubmit="login">
<input type="text" placeholder="请输入学号" name="studentId" />
<input type="password" placeholder="请输入密码" name="password" />
<button type="submit">登录</button>
</form>
</view>
```
2. 在wxss文件中设置按钮样式:
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
input {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
button {
background-color: #007aff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
}
```
3. 在js文件中添加登录事件处理函数:
```javascript
Page({
login: function(e) {
var studentId = e.detail.value.studentId;
var password = e.detail.value.password;
if (!studentId || !password) {
wx.showToast({
title: '请输入学号和密码',
icon: 'none'
})
return;
}
wx.navigateTo({
url: '/pages/other-page/other-page?studentId=' + studentId + '&password=' + password
})
}
})
```
在上述代码中,当用户点击登录按钮时,会触发login事件处理函数。首先,从输入框中获取学号和密码的值,并进行非空校验。如果学号或密码为空,则使用wx.showToast()函数在页面上显示一个提示框。如果学号和密码都不为空,则使用wx.navigateTo()函数跳转到其他页面,并将学号和密码的值作为参数传递给其他页面。
阅读全文