方法一：自定义检验 

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
125
126
<template>  
    <div>  
        <div class="home">  
            <h1 class="title">info</h1>  
            <p>Info页面，用于修改用户登录密码。</p>  
        </div>  
        <div class="content">  
            <a-form  
                    :form="form"  
                    @submit="handleSubmit"  
            >  
                <a-form-item  
                        label="当前密码"  
                >  
                    <a-input  
                            v-decorator="\[  
          'currentPassword',  
          {rules: \[{ required: true, message: '您的当前密码' }\]}  
        \]"  
                            type="password"  
                    />  
                </a-form-item>  
                <a-form-item  
                        label="新密码"  
                >  
                    <a-input  
                            v-decorator="\[  
          'newPassword',  
          {  
            rules: \[{  
              required: true, message: 'Please input your password!',  
            }, {  
              validator: validateToNextPassword,  
            }\],  
          }  
        \]"  
                            type="password"  
                    />  
                </a-form-item>  
                <a-form-item  
                        label="新密码确认"  
                >  
                    <a-input  
                            v-decorator="\[  
          'conPassword',  
          {  
            rules: \[{  
              required: true, message: 'Please confirm your password!',  
            }, {  
              validator: compareToFirstPassword,  
            }\],  
          }  
        \]"  
                            type="password"  
                            @blur="handleConfirmBlur"  
                    />  
                </a-form-item>  
                <a-form-item>  
                    <a-button  
                            type="primary"  
                            html-type="submit"  
                    >  
                        保存  
                    </a-button>  
                </a-form-item>  
            </a-form>  
        </div>  
    </div>  
</template>  
  
<script>  
    **export default** {  
        name: "Info",  
        data() {  
            **return** {  
                form: **this**.$form.createForm(**this**),  
                confirmDirty: **false**,  
            }  
        },  
        methods: {  
            handleSubmit(e) {  
                e.preventDefault();  
                **this**.form.validateFields((err, values) => {  
                    **if** (!err) {  
                        **this**.$api.user.changePwd({  
                            currentPassword: values.currentPassword,  
                            newPassword: values.newPassword  
                        }).then(res => {  
                            // 执行某些操作  
                            **this**.$message.success('修改成功');  
                            console.log(res)  
                        })  
                    }  
  
                });  
            },  
            handleConfirmBlur(e) {  
                **const** value = e.target.value;  
                **this**.confirmDirty = **this**.confirmDirty || !!value;  
  
            },  
            validateToNextPassword  (rule, value, callback) {  
                **const** form = **this**.form;  
                **if** (value && **this**.confirmDirty) {  
                    form.validateFields(\['conPassword'\], { force: **true** });  
                }  
                callback();  
            },  
            compareToFirstPassword  (rule, value, callback) {  
                **const** form = **this**.form;  
                **if** (value && value !== form.getFieldValue('newPassword')) {  
                    callback('Two passwords that you enter is inconsistent!');  
                } **else** {  
                    callback();  
  
                }  
            },  
        }  
    }  
  
</script>  
  
<style scoped>  
  
</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
<template>  
    <div>  
        <div class="home">  
            <h1 class="title">info</h1>  
            <p>Info页面，用于修改用户登录密码。</p>  
        </div>  
        <div class="content">  
            <a-form  
                    :form="form"  
                    @submit="handleSubmit"  
            >  
                <a-form-item  
                        label="当前密码"  
                >  
                    <a-input  
                            v-decorator="\[  
          'currentPassword',  
          {rules: \[{ required: true, message: 'Please input your currentPassword!' }\]}  
        \]"  
                            type="password"  
                    />  
                </a-form-item>  
                <a-form-item  
                        label="新密码"  
                >  
                    <a-input  
                            v-decorator="\[  
          'newPassword',  
          {rules: \[{ required: true, message: 'Please input your newPassword!' }\]}  
        \]"  
                            type="password"  
                    />  
                </a-form-item>  
                <a-form-item  
                        label="新密码确认"  
                >  
                    <a-input  
                            v-decorator="\[  
          'conPassword',  
          {rules: \[{ required: true, message: 'Please confirm your password!' }\]}  
        \]"  
                            type="password"  
                    />  
                </a-form-item>  
                <a-form-item>  
                    <a-button  
                            type="primary"  
                            html-type="submit"  
                    >  
                        保存  
                    </a-button>  
                </a-form-item>  
            </a-form>  
        </div>  
    </div>  
</template>  
  
<script>  
    **export default** {  
        name: "Info",  
        data() {  
            **return** {  
                form: **this**.$form.createForm(**this**),  
            }  
        },  
        methods: {  
            handleSubmit(e) {  
                e.preventDefault();  
                **this**.form.validateFields((err, values) => {  
                    **if** (!err && values.newPassword===values.conPassword) {  
                        **this**.$api.user.changePwd({  
                            currentPassword: values.currentPassword,  
                            newPassword: values.newPassword  
                        }).then(() => {  
                            // 执行某些操作  
                            **this**.$message.success('修改成功');  
                        })  
                    }**else** {  
                        **this**.$message.error('您输入的密码和确认密码不匹配!');  
                    }  
                });  
            }  
        }  
    }  
  
</script>  
  
<style scoped>  
  
</style>