vuejs2 - 该字段不是必需的，但如果用户输入一个值，它必须满足一些规则(vuetify 规则)

Question

我正在尝试为接受 url 的字段输入验证，该字段不是必需的，但如果用户输入值，则它必须满足 url 正则表达式。

所以我尝试了以下代码

<v-text-field height="34px" v-model="website" single-line outline placeholder="http://"  :rules="urlRules"></v-text-field>

这个属性 :rules="urlRules"指的是我在 vue 对象中给出的大量规则

 urlRules: [
        v => !!v || 'required',
        v => /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi.test(v) || 'Please enter a correct URL to your website'
      ],

我想更改规则对象中的验证以使其不需要，但如果用户输入网址，则它必须正确

Answer 1

这就是我如何使用 Vuetify 验证非必需字段:

urlRules: [
    (v) => ( !v || YOUR_REGEX.test(v) ) || 'Please enter a correct URL to your website'
  ],

检查!v。我首先验证，如果没有传递任何内容，将触发 true 值，这意味着不需要。但如果某些内容通过了，将检查您的正则表达式或您想要放置的任何表达式。

还有其他选项，例如规则中的 if else，但我更喜欢这个(更漂亮)。