Vue 两个字段联合校验之修改密码功能的实现

首先我们来讲解一下什么是“Vue 两个字段联合校验”以及它的实现原理。

什么是“Vue 两个字段联合校验”？

“Vue 两个字段联合校验”是指在表单中，两个或多个字段之间的值需要相互校验，如密码和确认密码之间的校验，也就是输入的密码和确认密码要一致。如果出现了不一致的情况，我们需要在页面上提示用户错误信息，并阻止表单的提交。

实现原理

实现两个字段联合校验的方法通常分为两个步骤：

1. 给每个需要校验的表单项加上 v-model 指令，来绑定数据模型。
2. 在表单提交时通过自定义校验规则来判断两个密码字段是否一致。

其中自定义校验规则通常通过 Vue 的自定义指令来实现，具体实现方式如下：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label>密码：</label>
      <input v-model="password" type="password" />
      <br/>
      <label>确认密码：</label>
      <input v-model="confirmPassword" type="password" />
      <br/>
      <p v-if="!isValid">密码不一致</p>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      confirmPassword: '',
      isValid: true
    }
  },
  directives: {
    validate: {
      bind(el, binding, vnode) {
        el.addEventListener('input', () => {
          const password = vnode.context.password;
          const confirmPassword = vnode.context.confirmPassword;
          vnode.context.isValid = confirmPassword === password;
        })
      },
      unbind(el) {
        el.removeEventListener('input', () => {});
      }
    }
  },
  methods: {
    handleSubmit() {
      if (this.isValid) {
        // 提交表单
      } else {
        // 校验不通过
      }
    }
  }
}
</script>

上面代码中，在 input 事件绑定的回调函数中，我们将判断两个字段的值是否一致，然后将结果绑定给了 isValid 变量。如果 isValid 变量的值为 false，则在页面上显示错误提示。

在 export default 中的 directives 对象中，我们定义了一个自定义指令 validate，并将它绑定到需要校验的表单项上。在 bind 函数中，我们给这个表单项绑定了一个 input 事件监听器。当用户在这个表单项中输入内容时，该事件监听器会被触发，并执行自定义校验逻辑。在 unbind 函数中，我们则将这个 input 监听器解绑，以避免内存泄漏。

关于如何实现修改密码功能，我们可以通过以下两个示例来说明。

示例一：直接使用表单提交

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label>旧密码：</label>
      <input v-model="oldPassword" type="password" />
      <br/>
      <label>新密码：</label>
      <input v-model="newPassword" type="password" />
      <br/>
      <label>确认新密码：</label>
      <input v-model="confirmNewPassword" type="password" v-validate />
      <p v-if="!isValid">密码不一致</p>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      confirmNewPassword: '',
      isValid: true
    }
  },
  directives: {
    validate: {
      bind(el, binding, vnode) {
        el.addEventListener('input', () => {
          const newPassword = vnode.context.newPassword;
          const confirmNewPassword = vnode.context.confirmNewPassword;
          vnode.context.isValid = confirmPassword === newPassword;
        })
      },
      unbind(el) {
        el.removeEventListener('input', () => {});
      }
    }
  },
  methods: {
    handleSubmit() {
      // 校验两个新密码字段是否一致
      if (!this.isValid) {
        return;
      }

      // 将表单中的数据提交到后端

      // 成功修改密码
    }
  }
}
</script>

上面代码中，我们依然使用了自定义指令 validate 来实现两个新密码字段的校验。不同的是，我们在表单的提交事件中，先校验两个新密码字段是否一致。如果不一致，就不提交表单。如果一致，则将表单中的数据提交到后端。

示例二：使用对话框实现修改密码功能

<template>
  <div>
    <button @click="openDialog">修改密码</button>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="editForm" :model="editForm" label-width="100px">
        <el-form-item label="旧密码">
          <el-input v-model="editForm.oldPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="editForm.newPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input v-model="editForm.confirmNewPassword" type="password" v-validate></el-input>
          <p v-if="!isValid">密码不一致</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTitle: '修改密码',
      dialogVisible: false,
      editForm: {
        oldPassword: '',
        newPassword: '',
        confirmNewPassword: ''
      },
      isValid: true
    }
  },
  directives: {
    validate: {
      bind(el, binding, vnode) {
        el.addEventListener('input', () => {
          const newPassword = vnode.context.editForm.newPassword;
          const confirmNewPassword = vnode.context.editForm.confirmNewPassword;
          vnode.context.isValid = confirmPassword === newPassword;
        })
      },
      unbind(el) {
        el.removeEventListener('input', () => {});
      }
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleEdit() {
      // 校验两个新密码字段是否一致
      this.$refs.editForm.validate(valid => {
        if (valid) {
          // 将表单中的数据提交到后端

          // 成功修改密码
          this.dialogVisible = false;
        } else {
          // 校验不通过，不提交表单
        }
      });
    }
  }
}
</script>

上面代码中，我们使用了 ElementUI 中的 el-dialog 组件来实现修改密码的对话框效果。我们在 el-dialog 组件中，使用 el-form 组件来放置我们需要修改的旧密码、新密码和确认新密码字段。并在确认新密码字段的 el-input 组件中，添加了自定义指令 v-validate，实现了两个新密码字段的校验。

在 el-dialog 的底部，我们添加了取消和确定按钮。当点击确定按钮时，我们调用了 el-form 组件的 validate 方法，来校验两个新密码字段是否一致。如果校验通过，则将表单中的数据提交到后端，并关闭对话框。如果校验不通过，则不提交表单，并在页面上显示错误提示。