输入框校验网址格式且可正常访问

<template>
  <el-form
    ref="formRef"
    style="max-width: 600px"
    :model="mainForm"
    label-width="auto"
    class="demo-ruleForm"
    :rules="rules"
  >
    <el-form-item label="website" prop="website" :rules="rules">
      <el-input v-model="mainForm.website" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
      <el-button @click="resetForm(formRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";

const formRef = ref<FormInstance>();

const mainForm = reactive({
  website: "",
});
const websiteValidator = async (rule: any, value: any, callback: any) => {
  if (value === "") {
    return callback(new Error("网站地址不能为空"));
  }

  // 简单的URL验证正则表达式
  const urlPattern = /^(http|https):\/\/[^ "]+$/;
  if (!urlPattern.test(value)) {
    return callback(new Error("请输入有效的网站地址"));
  }

  try {
    const response = await fetch(value, { method: "HEAD" });
    if (response.ok) {
      return callback();
    }
    return callback(new Error("网站地址不可访问"));
  } catch (error) {
    return callback(new Error("网站地址不可访问"));
  }
};
const rules = {
  website: [
    { required: true, message: "website is required" },
    {
      validator: websiteValidator,
      trigger: "blur",
    },
  ],
};
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>