element ui 网址 验证 怎么写

以下是一个基本的 Element UI 网址验证函数：

function validateUrl(url) {
  if (url === '') {
    return false;
  }
  const pattern = /^(http|https):\/\/[a-z0-9\-\.]+\.[a-z]{2,}/i;
  return pattern.test(url);
}

该函数首先检查 URL 是否为空，如果为空则返回 false。然后使用正则表达式模式检查 URL 是否以 "http://" 或 "https://" 开头，并且后面跟着一个有效的域名和顶级域名。如果 URL 符合这个模式，则返回 true。否则返回 false。

您可以使用这个函数来检查用户输入的 URL 是否有效。例如，您可以将它与 Element UI 的表单验证一起使用，如下所示：

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item label="Website">
      <el-input v-model="form.url"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        url: ''
      },
      rules: {
        url: [
          { required: true, message: 'Please enter a website URL' },
          { validator: this.validateUrl, message: 'Invalid website URL' }
        ]
      }
    };
  },
  methods: {
    validateUrl(rule, value, callback) {
      if (value === '') {
        callback(new Error('Please enter a website URL'));
      } else if (!validateUrl(value)) {
        callback(new Error('Invalid website URL'));
      } else {
        callback();
      }
    }
  }
};
</script>

在这个示例中，我们将 Element UI 表单组件与 validateUrl 函数结合使用，以验证用户输入的 URL 是否有效。如果 URL 无效，则会显示一个错误消息