Question

我为我的应用程序制作了以下可重复使用的输入组件，并在其中添加了vee-validate进行验证。

Input.vue

      <input
        :type="type"
        v-on="$listeners"
        :value="value"
        :class="errors.first(name) ? 'input mt-2 is-danger' : 'input mt-2'"
        @input="$emit('update', $event.target.value)"
        :placeholder="placeholder"
        v-validate="rules"
        :name="name"
      />
      <span class="has-text-danger-dark">{{ errors.first(name) }}</span>
      
      
<script>
export default {
  inheritAttrs: false,
  props: ["label", "placeholder","name", "rules", "value", "type"],
  model: {
    prop: "value",
    event: "update",
  },
};
</script>

我正在使用以下组件：

<Input
      placeholder="(912) 555-4321"
      v-model.lazy="basics.phone"
      label="Phone"
      type="tel"
      slot="field"
      name="phone"
      rules="{required: true, regex: ^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$}"
    />

发送上述参数后，我在输入现场电话上收到一条错误消息：

[vee-validate]不存在这样的验证器'{required'。

我已经将该组件用于带有验证规则的其他输入，并且可以正常工作。但是使用正则表达式则不能。

    <Input
      placeholder="john@gmail.com"
      v-model.lazy="basics.email"
      label="Email"
      type="email"
      slot="field"
      name="email"
      rules="required|email"
    />

Answer 1

刚发现我需要在js中转义\。

regex: /^[\\+]?[(]?[0-9]{3}[)]?[-\s\\.]?[0-9]{3}[-\s\\.]?[0-9]{4,6}$/im

vee-validate不存在“必需”的验证器。与正则表达式

1 个答案: