register.vue
3.6 KB
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<template>
<view class="login-container">
<view class="login-title">用户注册</view>
<u-form :model="regForm" ref="regForm">
<u-form-item prop="username">
<u-input v-model="regForm.username" placeholder="请输入用户名" />
</u-form-item>
<u-form-item prop="password">
<u-input v-model="regForm.password" type="password" placeholder="请输入密码" />
</u-form-item>
<u-form-item prop="repassword">
<u-input v-model="regForm.repassword" type="password" placeholder="请再次输入密码" />
</u-form-item>
<u-form-item>
<u-checkbox-group>
<u-checkbox v-model="checked" shape="circle" :active-color="ThemeColor.PrimaryColor"></u-checkbox>
<text class="agreement">我已阅读并同意《用户协议》及《隐私协议》</text>
</u-checkbox-group>
</u-form-item>
</u-form>
<view class="btn">注册</view>
<view class="tip">
已有账号，<text :style="{color: ThemeColor.PrimaryColor}" @click="goLog">立即登录</text>
</view>
</view>
</template>
<script>
import ThemeColor from '@/utils/themeColor'
export default {
data() {
return {
ThemeColor,
regForm: { username: '', password: '', repassword: ''},
checked: false,
regRules: {
username: [
{ required: true, message: '请填写用户名', trigger: ['blur']},
{ pattern: /^[0-9a-zA-Z]*$/g, transform(value) { return String(value) }, message: '只能包含字母或数字', trigger: 'blur' },
{ min: 6, max: 8, message: '长度在6-8个字符之间', trigger: 'change' }
],
password: [
{ required: true, message: '请填写密码', trigger: ['blur']},
{ pattern: /^(?=.*[A-Z])[a-zA-Z0-9]+$/, transform(value) { return String(value) }, message: '字母数字组成且必须包含大写字母', trigger: ['change', 'blur'] },
{ min: 6, max: 8, message: '长度在6-16个字符之间', trigger: ['change'] },
],
repassword: [
{ required: true, message: '请填写密码', trigger: ['blur']},
{ pattern: /^(?=.*[A-Z])[a-zA-Z0-9]+$/, transform(value) { return String(value) }, message: '字母数字组成且必须包含大写字母', trigger: ['change', 'blur'] },
{ min: 6, max: 8, message: '长度在6-16个字符之间', trigger: ['change'] },
{
validator: (rule, value, callback) => {
value !== this.regForm.password ? callback(new Error('两次密码输入不一致')) : callback()
},
trigger: ['change']
}
]
}
}
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.regForm.setRules(this.regRules);
},
methods: {
// 前往登录
goLog() {
uni.redirectTo({
url: '/pages/login/login'
})
},
submit() {
this.$refs.regForm.validate().then(valid => {
if (valid) {
console.log('验证通过');
} else {
console.log('验证失败');
}
})
}
}
}
</script>
<style scoped lang="scss">
.login-container{
position: relative;
padding: 0 30rpx;
box-sizing: border-box;
height: calc(100vh - 88rpx);
max-height: 100vh;
.login-title{
color: #3d3d3d;
font-size: 56rpx;
margin: 40rpx 0 60rpx 0;
line-height: 74rpx;
font-weight: 500;
}
.agreement{
color: #333;
line-height: 38rpx;
font-size: 28rpx;
}
.btn{
width: 100%;
height: 88rpx;
text-align: center;
line-height: 88rpx;
font-size: 32rpx;
background-color: $uni-color-primary;
border-radius: 12rpx;
color: #fff;
margin-top: 30rpx;
}
.tip{
position: absolute;
bottom: 44rpx;
left: 50%;
font-size: 36rpx;
color: #333;
transform: translateX(-50%);
}
}
</style>