Vuetify 文本字段的正则表达式 URL 规则失败

Question

我在使用 Vuetify 的 Vue 文本字段的 Typescript 测试规则中有一个函数。

诸如 https://www.cnn.com、www.test.xxx 之类的内容无法通过验证。 我似乎无法理解为什么...

Vuetify 文本字段（Vuetify v.2.2.26）：

<v-text-field label="Web site" dense :rules="webSiteRules" :readonly="!editing" v-model="profile.WebSite" />

代码（在 .vue 文件中导入 - 使用单个文件组件）：

export function websiteRules(): ((v: string) => boolean | string)[] {
  const regexp = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gim;
  return [
    (v: string): boolean | string => !!v || 'Web site required',
    (v: string): boolean | string =>
      regexp.test(v) || 'Wrong format. use e.g. http(s)://www.cnn.com'
  ];
}

Answer 1

我根据this答案使用这个解决方案 并使用这样的代码：

 <v-text-field v-model="urlString" placeholder="Enter Url" :rules="rules"> </v-text-field>

在我写的数据中：

<script>
export default {
  data() {
    return {
      urlString: "",
      rules: [
        (value) => !!value || "Required.",
        (value) => this.isURL(value) || "URL is not valid",
      ],
    };
  },
  methods: {
    isURL(str) {
      let url;

      try {
        url = new URL(str);
      } catch (_) {
        return false;
      }

      return url.protocol === "http:" || url.protocol === "https:";
    },
  },
};
</script>

也希望能帮到你:)

Answer 2

<v-text-field
    label="Url Validation"
    :rules="[rules.url]"
></v-text-field>

必须在数据范围内

rules: {
    req: value => !!value || 'Required.',
    url: value => {
      const regex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}/gm
      return regex.test(value) || 'Invalid Url Format!!'
   },
},