要求和正则表达式与 vee-validate答案

【问题标题】：Require and Regex with vee-validate要求和正则表达式与 vee-validate
【发布时间】：2018-07-30 16:04:53
【问题描述】：

我正在尝试使用 vee-validate 设置必需的和正则表达式属性。正则表达式位works fine，但只要我添加所需的属性，整个控件disappears from the form。

这很好用 (fiddle)，但缺少必需的属性（多行以便于阅读）：

<input 
  v-validate="{ regex:/^((\d{3})[ -]|(\d{3}[ -]?)){2}\d{4}$/ }" 
  :class="{'input': true, 'is-danger': errors.has('phonenumber') }" 
  class="input is-primary" 
  name="phonenumber" 
  type="text" 
  placeholder="404-555-1212"
> <!-- end input -->

这会导致整个表单消失（fiddle）（多行以便于阅读）：

<input 
  v-validate="{ required|regex:/^((\d{3})[ -]|(\d{3}[ -]?)){2}\d{4}$/ }" 
  :class="{'input': true, 'is-danger': errors.has('phonenumber') }" 
  class="input is-primary" 
  name="phonenumber" 
  type="text" 
  placeholder="404-555-1212"
> <!-- end input -->

我尝试使用逗号分隔 vee-validate 属性，但这也以同样的方式失败。

我错过了什么？

【问题讨论】：

标签： attributes required vee-validate

【解决方案1】：

我需要包含required: true, 才能使属性正常工作。

像这样：

<input 
  v-validate="{ required: true, regex:/^((\d{3})[ -]|(\d{3}[ -]?)){2}\d{4}$/ }" 
  :class="{'input': true, 'is-danger': errors.has('phonenumber') }" 
  class="input is-primary" 
  name="phonenumber" 
  type="text" 
  placeholder="404-555-1212"
> <!-- end input -->

【讨论】：