# 密码表单验证功能实现
<template>
<view class="body">
<input type="text" class="uni-input common-input" password placeholder="输入旧密码" v-model="oldpassword">
<input type="text" class="uni-input common-input" password placeholder="输入新密码" v-model="newpassword">
<input type="text" class="uni-input common-input" password placeholder="确认新密码" v-model="renewpassword">
<button class="user-set-btn " :loading="loading" :class="{'user-set-btn-disable':disabled}" type="primary" @tap="submit" :disabled="disabled">完成</button>
</view>
</template>
<script>
export default {
data() {
return {
oldpassword: "",
newpassword:"",
renewpassword: "",
disabled: true,
loading:false
}
},
watch:{
oldpassword(val) {
this.change()
},
newpassword(val) {
this.change()
},
renewpassword(val) {
this.change()
}
},
methods: {
// 监听输入框
change() {
if(this.oldpassword && this.newpassword && this.renewpassword) {
this.disabled = false
return
}
this.disabled = true
},
// 验证层
check() {
if(!this.oldpassword || this.oldpassword === '') {
uni.showToast({
title:"旧密码不能为空",
icon:"none"
})
return false
}
if(!this.newpassword || this.newpassword === '') {
uni.showToast({
title:"新密码不能为空",
icon:"none"
})
return false
}
if(!this.renewpassword || this.renewpassword === '') {
uni.showToast({
title:"确认密码不能为空",
icon:"none"
})
return false
}
if(this.newpassword !== this.renewpassword) {
uni.showToast({
title:"新密码和确认密码不一致",
icon:"none"
})
return false
}
return true
},
// 提交
submit() {
this.loading = true
this.disabled = true
if(!this.check()){
this.loading = false
this.disabled = false
return
}
// 提交服务器
uni.showToast({
title: "提交服务器",
mask: false
})
this.loading = false
this.disabled = false
}
}
}
</script>
<style lang="less" scoped>
@import "../../common/form.css";
</style>
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
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