验证多个URL输入字段

Question

我有以下Javascript验证功能，应检查发布到我的php的URL是否正常-如果未显示消息以更正条目。 我一定在某个地方犯了一个错误，因为它不起作用，并且console.log上说：ReferenceError：找不到变量：$ validateFormbasic.html：12 onsubmitbasic.html：24：95请告诉我如何解决它？ 非常感谢！

<form method="POST" name="inputLinks" onsubmit="return validateForm();">
<input type="text" name="web1" id="url1" placeholder="domain.com">
<input type="text" name="web2" id="url2" placeholder="domain.com">
<input type="text" name="web3" id="url3" placeholder="domain.com">
<input type="submit" name="Submit" value="Done" />   
</form>

<script type="text/javascript">
function validateURL(web1, web2, web3) {
var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
return reurl.test(url);
}

function validateForm()
{
// Validate URL
var url = $("#url1", "#url2", "#url3").val();
if (validateURL(url)) { } else {
    alert("Please enter a valid URL, remember including http://");
}
return false;
}
</script>

Answer 1

正如Alberto的评论所提到的，在调用函数时，似乎没有加载jQuery。 在我看来，似乎您选择URL值的语法不太正确。

我会使用以下方式：

<form method="POST" name="inputLinks">
<input type="text" name="web1" id="url1" class="url" placeholder="domain.com" />
<input type="text" name="web2" id="url2" class="url"  placeholder="domain.com" />
<input type="text" name="web3" id="url3" class="url"  placeholder="domain.com" />
<input type="submit" name="Submit" value="Done" />   
</form>

<script type="text/javascript">

    $(function(){

        function validateURL(url) {
            var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
            return reurl.test(url);
        }

        $('form').submit(function(e){

            var isValid = true;

            $('.url').each(function(){
               isValid = validateURL($(this).val());
               return isValid;
            });

            if (!isValid){
                e.preventDefault();
                alert("Please enter a valid URL, remember including http://");
            }

        });

    });

</script>

更新

演示JS小提琴