验证多个URL输入字段

时间:2013-12-04 14:25:32

标签: javascript forms validation

我有以下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>

1 个答案:

答案 0 :(得分: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>

<强>更新

Demo JS Fiddle