javascript - 如何检查 url 是否给定空字符串

Question

您好，是否可以使用 url 类型验证输入标记？

我目前有一个带有 URL 类型的输入标记，供用户键入 url，如果用户键入的值不是 url，也可以。

但是当用户输入“http://www .”时，我的输入字段接受它并将表单发布到服务器，这不是正确的值。如何检查输入字段中的空值以验证空网址？

以下是我的表单接受带有空 url 的 url 链接的几种情况:

1. http://www .
2. www。
3. http://

当 javascript 或 php 的 url 链接中有空值时，有什么方法可以验证并停止表单提交吗？谢谢

我的表格代码:

<form class="form" id="form" action="" method="POST" enctype="multipart/form-data">
                                    <div class="box-body">
                                        <input type="hidden" name="banner_id" value="1"></input>
                                        <div class="form-group" >
                                            <label for="bannerName">Banner Name 旗帜名称</label>
                                            <input type="text" class="form-control" name="bannerName" id="bannerName" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
                                        </div>
                                        <div class="form-group" >
                                            <label for="bannerUrl">Banner URL </label>
                                            <input type="url" autocomplete="on" class="form-control" name="bannerUrl" id="bannerUrl" placeholder="Please Enter Url" onChange="checkDisabled(testing);" required>
                                        </div>
                                         <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="uploaded_file" name="uploaded_file"  onChange="checkDisabled(testing);"><br>
                                            <p class="help-block">Your picture size not more than 2MB.  (Only JPEG or JPG is allowed)</p>
                                        </div>  

                                        <div class="checkbox">
                                            <button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>      
                                        </div>
                                    </div><!-- /.box-body -->


                                </form>                  <!-- Date range -->

Answer 1

如果我没理解错你的问题，那么这对你有用。

表单页面

<div class="form-group" >
   <label for="bannerUrl">Banner URL </label>
   <input type="url" autocomplete="on" class="form-control" name="bannerUrl" id="bannerUrl" placeholder="Please Enter Url" onChange="checkDisabled(testing);" required>
   <span class="error_label"></span>
</div>

jQuery 方式

$('#form').validate({
    rules : {
        bannerUrl : {
            required : true,
            url : true
        }
    },
    messages : {
        bannerUrl : {
            required : "This field is required",
            url : "Please enter valid URL"
        }
    },
    submitHandler: function(form) {  
        if ($(form).valid()) 
            form.submit(); 
            return false; // prevent normal form posting
    },
    errorPlacement: function(error, element) {      
        $(element).closest('span').find('.error_label').html(error);
    }
})

正则表达式方式

$('#bannerUrl').on('keyup', function (e) {
    var checkUrl = checkWebUrl($(this).val());
    console.log(checkUrl);
    if (!checkUrl) {
        // your error message
        alert('Please enter valid url');
        return false;
    } else {
        // your message
        alert('Valid url')
    }
});

function checkWebUrl(url)
{
    //regular expression for URL
    //console.log(learnRegExp('http://www.google-com.123.com')); // true
    //console.log(learnRegExp('http://www.google-com.123')); // false
    //console.log(learnRegExp('https://www.google-com.com')); // true
    //console.log(learnRegExp('http://google-com.com')); // true
    //console.log(learnRegExp('http://google.com')); //true
    //console.log(learnRegExp('google.com')); //false
    //console.log(learnRegExp('www.google')); //false
    //console.log(learnRegExp('http://www.google')); //false
    var urlregex = new RegExp(
        "^(http:\/\/www.|https:\/\/www.|ftp:\/\/www.|www.){1}([0-9A-Za-z]+\.)");
    return urlregex.test(checkWebUrl.arguments[0]);
}