vue项目中更改密码并验证

 

  
data() {
//此处即表单发送之前验证   
            let validateNewPassword = (rule, value, callback) => {
            if (value === this.form.password) {
                callback(new Error('新密码不能与原密码相同!'))
                } else {
                callback()
                }
            }
            let validateNewPassword2 = (rule, value, callback) => {
            if (value !== this.form.newPassword) {
                callback(new Error('与新密码不一致!'))
                } else {
                callback()
                }
            }
            return {
                dialogVisible: true,
                form:{
                    password:'',
                    newPassword:'',
                    newPassword2:''
                },
                rules: {
                            password: [
                                 { required: true, message: '请输入原密码', trigger: 'blur' }
                            ],
                            newPassword: [
                            { required: true, message: '请设置新密码', trigger: 'blur' },
                            { validator: validateNewPassword, trigger: 'blur' }
                            ],
                            newPassword2: [
                            { required: true, message: '请确认新密码', trigger: 'blur' },
                            { validator: validateNewPassword2, trigger: 'blur' }
                            ]
                    }
            }
        },
 

  <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose"  :close-on-click-modal="false">
                        <el-form :model="form" status-icon :rules="rules"
                            ref="form" label-width="100px"
                            class="demo-ruleForm">
                            <el-form-item label="原密码" prop="password">
                                <el-input type="password"
                                    v-model="form.password"
                                    placeholder="请输入原密码"></el-input>
                            </el-form-item>
                            <el-form-item label="新密码" prop="newPassword">
                                <el-input type="password"
                                    v-model="form.newPassword"
                                    placeholder="请输入新密码"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="newPassword2">
                                <el-input type="password"
                                    v-model="form.newPassword2"
                                    placeholder="请确认新密码"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible= false">取 消</el-button>
                            <el-button type="primary"  @click="submitForm('form')">确 定</el-button>
                        </span>
                    </el-dialog>