jquery正则验证 url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>URL Validation</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="urlForm">
        <input type="text" id="urlInput" placeholder="Enter URL">
        <button type="submit">Validate</button>
    </form>
    <p id="validationResult"></p>

    <script>
        $(document).ready(function() {
            $('#urlForm').on('submit', function(event) {
                event.preventDefault();
                var url = $('#urlInput').val();
                var urlPattern = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
                if (urlPattern.test(url)) {
                    $('#validationResult').text('Valid URL');
                    $('#validationResult').css('color', 'green');
                } else {
                    $('#validationResult').text('Invalid URL');
                    $('#validationResponse').css('color', 'red');
                }
            });
        });
    </script>
</body>
</html>