vue用户输入了访问地址，前端校验该地址是否可访问

在 Vue 的 Element UI 中使用 进行用户输入栏的表单验证是非常方便的。如果你想要在用户输入访问地址后，前端校验该地址是否可访问，可以通过以下步骤实现：

定义校验规则：
首先，在 Vue 组件中定义需要的校验规则。对于地址是否可访问的校验，你可以使用异步校验（async-validator）来实现。在 Element UI 中，可以通过 rules 属性来定义校验规则。

编写校验方法：
在校验规则中，可以定义一个自定义的校验方法，用于检查地址是否可访问。这个方法可以发送一个 HTTP 请求到该地址，验证返回的状态码或内容来确定地址是否可访问。

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    <el-form-item label="访问地址" prop="url">
      <el-input v-model="formData.url"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="validateForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        url: ''
      },
      formRules: {
        url: [
          { required: true, message: '请输入访问地址', trigger: 'blur' },
          {
            validator: this.checkURL,
            message: '地址不可访问',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    async checkURL(rule, value, callback) {
      try {
        // 发送 HTTP 请求检查地址是否可访问
        const response = await fetch(value);
        if (response.ok) {
          callback();
        } else {
          callback(new Error('地址不可访问'));
        }
      } catch (error) {
        callback(new Error('地址不可访问'));
      }
    },
    validateForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，可以进行提交等操作
          console.log('表单验证通过');
        } else {
          // 表单验证失败
          console.log('表单验证失败');
        }
      });
    }
  }
};
</script>