跨领域验证

Question

希望我提供了足够的信息：使用下面的链接，任何人都可以将跨字段验证表单复制到一个有客户Your code must be 4 digits. 的字段中，并且一旦输入 4 位密码就不会出错（只有任何 4 个数字 @ 987654324@（不是任何其他字符））

https://codesandbox.io/s/s023f

https://vee-validate.logaretm.com/v3/advanced/rules-object-expression.html#cross-field-validation

以下是我在 equalFourDigits 上使用正则表达式 /^\d{4}$/ 尝试使用 import { extend } from "vee-validate"; 的示例，但在输入 4 个数字时我仍然看到自定义消息 - 我想保留自定义消息。

<script>
import { extend } from "vee-validate";

extend("equalFourDigits", {
  params: ["equalFourDigits"],
  validate: ({  equalFourDigits }) => {
    if ( equalFourDigits ===  /^\d{4}$/ ) {
      return true;
    }
    return false;
  },
  message:
    "Your code must be 4 digits. {equalFourDigits}"
});

export default {
  data: () => ({
    firstValue: '',
    secondValue: '',
    equalFourDigits: ''
  })
};
</script>

<template>
  <ValidationObserver>
    <ValidationProvider :rules="{ required: true, numeric: 4,  equalFourDigits: { equalFourDigits: 
     equalFourDigits }}" v-slot="{ errors }">
      <input type="text" v-model.number="secondValue">
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </ValidationObserver>
</template>

Answer 1

也许您可以改用:rules="{required: true, digits:4}"？

import {digits} from 'vee-validate/dist/rules';
extend('digits', {
  ...digits,
  message: `only four digits ...!!!!`,
})

或

extend("equalFourDigits", {
  validate: (value) => {
    const regex = new RegExp(/^\d{4}$/)
    if (regex.test(value)) {
      return true;
    }
    return `Your code must be 4 digits. ${value}`;
  },
});