vue2修改密码页面的表单rules规则

在Vue 2中，如果创建一个用于修改密码的表单，表单验证通常会使用Vuelidate库或者直接在`v-model`指令的`rules`属性中设置校验规则。下面是一个基本示例：

<template>
  <form @submit.prevent="submitForm">
    <input type="password" v-model="oldPassword" placeholder="旧密码" :rules="{ required: true, min: 6 }" />
    <input type="password" v-model="newPassword" placeholder="新密码" :rules="{ required: true, min: 6, equal: 'oldPassword' }" />
    <input type="password" v-model="confirmNewPassword" placeholder="确认新密码" :rules="{ required: true, min: 6, equal: 'newPassword' }" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { required, minLength, sameAs } from "vuelidate/lib/validators";

export default {
  data() {
    return {
      oldPassword: "",
      newPassword: "",
      confirmPassword: "",
    };
  },
  validations: {
    form: {
      oldPassword: { required, minLength },
      newPassword: { required, minLength, sameAs: "oldPassword" }, // 检查新密码是否与旧密码相同
      confirmPassword: { required, minLength, sameAs: "newPassword" }, // 检查确认密码是否与新密码相同
    },
  },
  methods: {
    submitForm() {
      this.$v.form.validate((valid) => {
        if (valid) {
          // 提交表单数据...
        } else {
          console.log("表单验证失败");
        }
      });
    },
  },
};
</script>

在这个例子中，我们设置了如下的验证规则：
- `required`：密码字段不能为空。
- `minLength`：密码长度至少为6位。
- `sameAs`：检查新密码是否与指定的字段（这里是旧密码或确认新密码）一致。