login.wxml页面
<!-- 用户名 --> <view> <text>用户名</text> <input type="text" class="userput" bindinput="getuser" auto-focus placeholder="请输入用户名"/> </view> <!-- 密码 --> <view> <text>密码</text> <input type="password" class="pwdput" bindinput="getpwd" auto-focus placeholder="请输入密码"/> </view> <button class="btn2" plain type="primary" bindtap="fnsubmit">登录</button>
.userput{ border: 1px solid #ccc; } .pwdput{ border: 1px solid #ccc; }
login.js
Page({ /** * 页面的初始数据 */ data: { user: 'admin12', pwd: '123456', inputUser:'', inputPwd:'' }, getuser(e) { //通过事件源对象来获取用户名输入框的输入的值 console.log(e.detail.value); this.setData({ //将输入框输入值使用setData实现双向数据绑定赋值给一个inputUser变量 inputUser: e.detail.value }) }, getpwd(e) { //通过事件源对象来获取密码输入框的输入的值 console.log(e.detail.value); this.setData({ //将输入框输入值使用setData实现双向数据绑定赋值给一个inputPwd变量 inputPwd:e.detail.value }) }, // 点击提交与data数据进行匹配 fnsubmit() { //进行判断 如果输入框输入的值与data中给定的值一致则提交成功 密码也一样 if (this.data.user==this.data.inputUser && this.data.pwd==this.data.inputPwd) { wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) }else{ //否则不一致则提交失败 wx.showToast({ title: '失败', icon: 'error', duration: 2000 }) } //如果输入的用户名和密码的值为空就提示不能为空 if (this.data.inputUser=="" || this.data.inputPwd=="") { wx.showToast({ title: '不能为空', icon: 'error', duration: 2000 }) } },
register.wxml
<view class="reset"> 注册页面 </view> <view class="flex"> <text>用户名:</text> <input focus placeholder="请输入用户名" type="text" bindinput="getuser"/> </view> <view class="flex"> <text>密码:</text> <input focus placeholder="请输入密码" type="password" bindinput="getpwd"/> </view> <view class="flex"> <text>再次输入密码:</text> <input focus placeholder="请输入密码" type="password" bindinput="getrepwd"/> </view> <button plain form-type="submit" type="primary" bindtap="subFn">提交</button>
register.js
Page({ /** * 页面的初始数据 */ data: { inputUser: '', inputPwd: '', inputRepwd: '' }, getuser(e) { console.log(e.detail.value); this.setData({ inputUser: e.detail.value }) }, getpwd(e) { console.log(e.detail.value); this.setData({ inputPwd: e.detail.value }) }, getrepwd(e) { console.log(e.detail.value); this.setData({ inputRepwd: e.detail.value }) }, subFn() { if (this.data.inputUser == "" || this.data.inputPwd == "" || this.data.inputRepwd == "") { wx.showToast({ title: '输入内容为空', icon: 'error', duration: 2000 }) return; } if (this.data.inputPwd != this.data.inputRepwd) { wx.showToast({ title: '两次密码不一致', icon: 'error', duration: 2000 }) return; } const reg = /^[a-zA-Z0-9]{6,}$/ if (!reg.test(this.data.inputUser) || !reg.test(this.data.inputPwd)) { wx.showToast({ title: '输入格式不正确', icon: 'error', duration: 2000 }) return; } wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) },