微信小程序 注册界面

js页面代码

// pages/task2/task2.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        p1: "",
        p2: "",
        u: ""
    },

    getUser(e) {
        this.setData({
            u: e.detail.value
        })
    },

    getPassword1(e) {
        this.setData({
            p1: e.detail.value
        })
    },

    getPassword2(e) {
        this.setData({
            p2: e.detail.value
        })
    },

    register() {
        let reg = /^[a-zA-Z0-9]{6,}$/

        if (!reg.test(this.data.u)) {
            wx.showToast({
                title: '用户名错误',
                icon: 'error',
            })
        } else if (!reg.test(this.data.p1)) {
            wx.showToast({
                title: '密码输入有误',
                icon: 'error',
                duration: 3000
            })
            return
        } else if (this.data.p2 == '') {
            wx.showToast({
                title: '请再次输入密码',
                icon: 'error',
                duration: 3000
            })
            return
        } else if (this.data.p1 != this.data.p2) {
            wx.showToast({
                title: '密码不一致',
                icon: 'error',
                duration: 3000
            })
            return
        } else {
            wx.showToast({
                title: '注册成功',
                icon: 'success',
                duration: 3000
            });
        }
    },
})

wxml页面代码

<view class="margin"> 
	<text class="ver">用户名：</text>
	<input bindinput="getUser" class="winput" type="text" placeholder="不少于六位" />
</view>
<view class="margin">
	<text>密码：</text>
	<input bindinput="getPassword1" class="winput" type="password" placeholder="不少于六位" />
</view>
<view class="margin">
	<text>再次输入密码：</text>
	<input bindinput="getPassword2" class="winput" type="password" placeholder="不少于六位" />
</view>

<button bindtap='register' plain class="margin">
	注册
</button>

wxss页面代码

.winput {
    border: 1px #aaa solid;
    height: 50rpx;
}

.margin{
  margin-top: 30rpx;
}