Javascript验证用户输入URL地址是否为空及格式是否正确

关于JavaScript验证用户输入URL地址是否为空及格式是否正确的攻略，可以按照以下步骤实现：

步骤一：获取用户输入的URL地址

1. 获取用户输入的URL地址。可以使用document.getElementById()或document.querySelector()等方法获取用户输入的URL地址。

const urlInput = document.getElementById('urlInput');
const urlValue = urlInput.value.trim();

步骤二：验证URL地址是否为空

1. 验证URL地址是否为空。可以使用正则表达式/^\s*$/来判断用户输入的URL地址是否为空。

if (/^\s*$/.test(urlValue)) {
  alert('URL地址不能为空！');
  return false;
}

步骤三：验证URL地址的格式是否正确

1. 验证URL地址的格式是否正确。可以使用正则表达式/^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i来判断用户输入的URL地址格式是否正确。其中，^表示以后面的内容开头，$表示以前面的内容结尾，i表示忽略大小写，[^\s/$.?#]表示URL地址中不能含有空格、/、$、.、?、#等特殊字符，.*表示匹配任意多个字符。

if (!/^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i.test(urlValue)) {
  alert('URL地址格式不正确！');
  return false;
}

示例一：在表单提交时验证URL地址

<form onSubmit="return validateUrl()">
  <label for="urlInput">URL地址：</label>
  <input type="text" id="urlInput">
  <button type="submit">提交</button>
</form>

<script>
function validateUrl() {
  const urlInput = document.getElementById('urlInput');
  const urlValue = urlInput.value.trim();

  if (/^\s*$/.test(urlValue)) {
    alert('URL地址不能为空！');
    return false;
  }

  if (!/^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i.test(urlValue)) {
    alert('URL地址格式不正确！');
    return false;
  }

  return true;
}
</script>

在用户提交表单时，验证URL地址是否为空及格式是否正确。

示例二：实时验证URL地址

<label for="urlInput">URL地址：</label>
<input type="text" id="urlInput">
<button id="urlBtn">验证</button>
<div id="result"></div>

<script>
const urlInput = document.getElementById('urlInput');
const urlBtn = document.getElementById('urlBtn');
const result = document.getElementById('result');

urlBtn.addEventListener('click', function() {
  const urlValue = urlInput.value.trim();

  if (/^\s*$/.test(urlValue)) {
    result.innerText = 'URL地址不能为空！';
    return;
  }

  if (!/^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i.test(urlValue)) {
    result.innerText = 'URL地址格式不正确！';
    return;
  }

  result.innerText = 'URL地址正确！';
});
</script>

实时验证用户输入的URL地址，当用户输入或修改URL地址时，即时显示验证结果。

以上两个示例可以根据具体需求进行修改，例如可以将弹窗提示改为在页面中显示信息，也可以根据不同的验证结果显示颜色不同的文本等。