如何检查url是否为空字符串

Question

Hi there is there possible to validate the input tag with url type?

I currently have an input tag with URL type for user to key in the url, it is okay if the user key in value that is not a url.

But when user key in "http://www.", my input field accept it and posted the form to the server which is not a proper value. How to check the empty value in the input field to validate empty url?

Here are few scenario my form accepted the url link with empty url:

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

Is there any way to validate and stop the form to submit when there are empty value in the url link with javascript or php? thanks

My FORM's CODE:

<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

If I'm not wrong to understand your question then this will work for you.

Form page

<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 Way

$('#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);
    }
})

Regex Way

$('#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]);
}