驗證多個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小提琴