利用jquery正则表达式在页面验证url网址输入是否正确

在页面中验证用户输入的URL网址是否正确是常见的需求，经常会使用正则表达式来进行验证。而使用jQuery的正则表达式进行验证，可以轻松实现这一功能。以下是完整的攻略过程：

1. 构建正则表达式

首先需要制定正确的正则表达式来检查用户输入的URL是否符合要求。以下是一个基本的正则表达式示例，可以检查URL是否包含“http”或“https”前缀，并以“.”com”或“.”cn”结尾：

/^((https?|ftp):\/\/)?([a-z0-9-]+\.)+[a-z0-9]{2,4}(\/[^\s]*)?$/i

以上正则表达式可以进行如下解释：

• ^ 匹配输入的开始位置
• ((https?|ftp):\/\/)? 可选匹配http、https 或 ftp 以及 ://
• ([a-z0-9-]+\.)+[a-z0-9]{2,4} 匹配URL的域名部分
• (\/[^\s]*)?$ 匹配路径部分，以 / 开头，后跟所有不包含空格的字符和/?#

2. 绑定事件监听函数

接下来，需要在页面的DOM元素上绑定一个事件监听函数来检查URL地址是否符合要求。示例代码如下所示：

$(document).ready(function () {
  $('#input-url').on('blur', function () {
    var url = $(this).val();
    if (!isValidURL(url)) {
      alert('请输入有效的URL地址');
      $(this).val('');
    }
  });
});

以上代码中，我们使用jQuery选择器选中了一个名为“input-url”的文本框，并在其上添加了一个“blur”事件监听函数。当用户从该元素上移开光标时，该事件会触发。在事件处理程序中，会调用名为“isValidURL”的函数来检查用户输入的URL是否符合要求。如果不符合要求，会弹出警告框，并将该文本框清空。

3. 编写函数检查URL是否符合要求

最后，需要编写一个函数来执行正则表达式检查URL是否符合要求。函数代码如下所示：

function isValidURL(url) {
  var pattern = /^((https?|ftp):\/\/)?([a-z0-9-]+\.)+[a-z0-9]{2,4}(\/[^\s]*)?$/i;
  return pattern.test(url);
}

以上代码中，我们使用了前面定义的正则表达式来检查传递给函数的URL是否符合要求。如果符合要求，则函数返回 true，反之返回 false。

示例1代码演示：
HTML代码：

<label for="url">请输入URL地址:</label>
<input type="text" id="url"><br>

JavaScript代码：

$(document).ready(function () {
  $('#url').on('blur', function () {
    var url = $(this).val();
    if (!isValidURL(url)) {
      alert('请输入有效的URL地址');
      $(this).val('');
    }
  });
});

示例2代码演示：
HTML代码：

<label for="url">请输入URL地址:</label>
<input type="text" id="url"><br>
<button id="btn">检查URL是否有效</button>

JavaScript代码：

$(document).ready(function () {
  $('#btn').on('click', function () {
    var url = $('#url').val();
    if (!isValidURL(url)) {
      alert('请输入有效的URL地址');
      $('#url').val('');
    } else {
      alert('URL地址有效！');
    }
  });
});

以上演示代码中，第一个示例为非按钮触发式，即用户在文本框中进行输入后，自动触发验证；第二个示例为按钮触发式，只有当用户点击检查按钮后才会进行验证。