Question

我正在尝试为接受url的字段输入验证，该字段不是必填字段，但是如果用户输入的值必须符合url regex。

所以我尝试了以下代码

<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

您可以按照以下步骤进行操作

urlRules: [
    v => (v && v.length > 0 && !YOUR_REGEXP.test(v)) ? 'Please enter a correct URL to your website' : true
],

Answer 2

我通过维护以下独立的验证功能解决了这一问题：

export const emailFormat = v =>
  /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
  "E-mail must be valid";

export const emptyEmailFormat = v => {
  if (v && v.length > 0) {
    return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
      "E-mail must be valid";
  } else {
    return true
  }
}

emailRules = {
    isRequired: this.question.mandatory ? required : true,
    emailFormat: this.question.mandatory ? emailFormat : emptyEmailFormat
};

Answer 3

这就是我设法使用 Vuetify 验证非必填字段的方法：

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

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

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

Answer 4

发布此问题后我有了这个主意

我使用了一个正则表达式，该正则表达式以我想要的模式接受一个空值

这是我用的

urlRules: [

        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'
      ],

因此，如果有更好的答案，请与我分享

该字段不是必填字段，但如果用户输入了值，则必须符合某些规则（验证规则）

4 个答案: