Skip to content

Commit 30651ff

Browse files
ZTL-UwUZTL-UwU
authored
Merge pull request #61 from segment-oj/add-login-register-input-validator-fisher
add login and register input checker
2 parents 55a135b + 4c39e96 commit 30651ff

File tree

2 files changed

+136
-45
lines changed

2 files changed

+136
-45
lines changed

‎src/components/user/login.vue‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<template>
22
<div>
3-
<el-dialog title="Login" :visible.sync="$store.state.user.showlogin" width="500px">
4-
<el-form :model="ldata">
5-
<el-form-item label="Username">
3+
<el-dialog title="Login" :visible.sync="$store.state.user.showlogin" :destroy-on-close="true" :close-on-click-modal="false" width="500px">
4+
<el-form :model="ldata" ref="loginForm" :rules="rules" :status-icon="true">
5+
<el-form-item label="Username" prop="username">
66
<el-input v-model="ldata.username"></el-input>
77
</el-form-item>
8-
<el-form-item label="Password">
8+
<el-form-item label="Password" prop="password">
99
<el-input type="password" v-model="ldata.password"></el-input>
1010
</el-form-item>
1111
<el-form-item>
1212
<el-button type="primary" v-on:click="onSubmit();" :loading="buttonLoading">Login</el-button>
1313
<el-button v-on:click="$store.state.user.showlogin = false">Cancel</el-button>
14+
<el-button v-on:click="reset();">Reset</el-button>
1415
</el-form-item>
1516
</el-form>
1617
</el-dialog>
@@ -23,16 +24,38 @@ import apiurl from './../../apiurl';
2324
export default {
2425
name: 'UserLogin',
2526
data() {
27+
let validateUsername = (rule, value, callback) => {
28+
if (value === '') {
29+
callback(new Error('Input your username'));
30+
} else {
31+
callback();
32+
}
33+
};
34+
let validatePasswd = (rule, value, callback) => {
35+
if (value === '') {
36+
callback(new Error('Input your password'));
37+
} else {
38+
callback();
39+
}
40+
};
2641
return {
2742
ldata: {
2843
username: '',
2944
password: ''
3045
},
46+
rules: {
47+
username: [
48+
{ validator: validateUsername, trigger: 'blur' }
49+
],
50+
password: [
51+
{ validator: validatePasswd, trigger: 'blur' }
52+
]
53+
},
3154
buttonLoading: false
3255
};
3356
},
3457
methods: {
35-
onSubmit() {
58+
submit() {
3659
this.buttonLoading = true;
3760
this.$axios
3861
.post(apiurl('/account/session'), {
@@ -59,6 +82,18 @@ export default {
5982
}
6083
this.buttonLoading = false;
6184
});
85+
},
86+
onSubmit() {
87+
this.$refs['loginForm'].validate((valid) => {
88+
if (valid) {
89+
this.submit();
90+
} else {
91+
return false;
92+
}
93+
});
94+
},
95+
reset() {
96+
this.$refs['loginForm'].resetFields();
6297
}
6398
}
6499
};

‎src/components/user/register.vue‎

Lines changed: 96 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
<template>
22
<div>
3-
<el-dialog title="Register" :visible.sync="$store.state.user.showregister" width="500px">
4-
<el-form :model="ldata">
5-
<el-form-item label="Username">
3+
<el-dialog title="Register" :visible.sync="$store.state.user.showregister" :destroy-on-close="true" :close-on-click-modal="false" width="500px">
4+
<el-form :model="ldata" ref="registerForm" :rules="rules" :status-icon="true">
5+
<el-form-item label="Username" prop="username">
66
<el-input v-model="ldata.username"></el-input>
77
</el-form-item>
8-
<el-form-item label="Password">
8+
<el-form-item label="Password" prop="password">
99
<el-input type="password" v-model="ldata.password"></el-input>
1010
</el-form-item>
11-
<el-form-item label="Repeat password">
11+
<el-form-item label="Repeat password" prop="passwdrepeat">
1212
<el-input type="password" v-model="ldata.passwdrepeat"></el-input>
1313
</el-form-item>
14-
<el-form-item label="Email">
14+
<el-form-item label="Email" prop="email">
1515
<el-input type="email" v-model="ldata.email"></el-input>
1616
</el-form-item>
1717
<el-form-item>
1818
<el-button type="primary" v-on:click="onSubmit();" :loading="buttonLoading">Register</el-button>
1919
<el-button v-on:click="$store.state.user.showregister = false;">Cancel</el-button>
20+
<el-button v-on:click="$refs['registerForm'].resetFields();">Reset</el-button>
2021
</el-form-item>
2122
</el-form>
2223
</el-dialog>
@@ -29,52 +30,107 @@ import apiurl from './../../apiurl';
2930
export default {
3031
name: 'UserRegister',
3132
data() {
33+
let validatePasswd = (rule, value, callback) => {
34+
if (value === '' || value === this.ldata.password) {
35+
callback();
36+
} else {
37+
callback(new Error('Password mismatch'));
38+
}
39+
};
40+
let validateEmail = (rule, value, callback) => {
41+
let regular = new RegExp('^(\\w-*\\.*)+@(\\w-?)+(\\.\\w{2,})+$');
42+
if (regular.test(value) || value === '') {
43+
callback();
44+
} else {
45+
callback(new Error('Email format error'));
46+
}
47+
};
48+
let validateUsername = (rule, value, callback) => {
49+
this.$axios
50+
.get(apiurl('account/username/accessibility/' + value))
51+
.then(() => {
52+
callback();
53+
})
54+
.catch(err => {
55+
if (err.request.status === 409) {
56+
callback(new Error('The user name is already in use'));
57+
} else {
58+
callback();
59+
}
60+
});
61+
};
3262
return {
3363
ldata: {
3464
username: '',
3565
password: '',
3666
passwdrepeat: '',
3767
email: ''
3868
},
69+
rules: {
70+
username: [
71+
{ required: true, message: 'Input your username', trigger: 'blur' },
72+
{ max: 10, message: 'No more than 10 characters', trigger: 'blur' },
73+
{ validator: validateUsername, trigger: 'blur'}
74+
],
75+
password: [
76+
{ required: true, message: 'Input your password', trigger: 'blur' },
77+
{ min: 6, message: 'Password must be more than 6 characters', trigger: 'blur' }
78+
],
79+
passwdrepeat: [
80+
{ required: true, message: 'Repeat your password', trigger: 'blur' },
81+
{ validator: validatePasswd, trigger: 'blur' },
82+
],
83+
email: [
84+
{ validator: validateEmail, trigger: 'blur'}
85+
]
86+
},
3987
buttonLoading: false
4088
};
4189
},
4290
methods: {
43-
onSubmit() {
91+
submit() {
4492
this.buttonLoading = true;
45-
if (this.ldata.password === this.ldata.passwdrepeat) {
46-
this.$axios
47-
.post(apiurl('/account'), {
48-
username: this.ldata.username,
49-
password: this.ldata.password,
50-
email: this.ldata.email
51-
})
52-
.then(() => {
53-
this.$store.state.user.showregister = false;
54-
this.$store.state.user.showlogin = true;
55-
// Successed
56-
this.$SegmentMessage.success(this, 'Your acount has been registered successfully');
57-
})
58-
.catch(err => {
59-
if (err.request.status === 400) {
60-
// HTTP 400 Bad Request
61-
this.$SegmentMessage.error(this, JSON.parse(err.request.response).detail);
62-
} else if (err.request.status === 409) {
63-
// HTTP 409 Conflict
64-
this.$SegmentMessage.error(this, 'Username has been taken');
65-
} else if (err.request.status === 429) {
66-
// HTTP 429 Too Many Requests
67-
this.$SegmentMessage.error(this, 'Requesting too frequently');
68-
} else {
69-
// Unknown error
70-
this.$SegmentMessage.error(this, 'Unknown error');
71-
}
72-
this.buttonLoading = false;
73-
});
74-
} else {
75-
// Password mismatch
76-
this.SendMessageError('Password mismatch');
77-
}
93+
this.$axios
94+
.post(apiurl('/account'), {
95+
username: this.ldata.username,
96+
password: this.ldata.password,
97+
email: this.ldata.email
98+
})
99+
.then(() => {
100+
this.$store.state.user.showregister = false;
101+
this.$store.state.user.showlogin = true;
102+
// Successed
103+
this.$SegmentMessage.success(this, 'Your acount has been registered successfully');
104+
this.buttonLoading = false;
105+
})
106+
.catch(err => {
107+
if (err.request.status === 400) {
108+
// HTTP 400 Bad Request
109+
this.$SegmentMessage.error(this, JSON.parse(err.request.response).detail);
110+
} else if (err.request.status === 409) {
111+
// HTTP 409 Conflict
112+
this.$SegmentMessage.error(this, 'Username has been taken');
113+
} else if (err.request.status === 429) {
114+
// HTTP 429 Too Many Requests
115+
this.$SegmentMessage.error(this, 'Requesting too frequently');
116+
} else {
117+
// Unknown error
118+
this.$SegmentMessage.error(this, 'Unknown error');
119+
}
120+
this.buttonLoading = false;
121+
});
122+
},
123+
onSubmit() {
124+
this.$refs['registerForm'].validate((valid) => {
125+
if (valid) {
126+
this.submit();
127+
} else {
128+
return false;
129+
}
130+
});
131+
},
132+
reset() {
133+
this.$refs['register'].resetFields();
78134
}
79135
}
80136
};

0 commit comments

Comments
 (0)