如何檢查網址是否為空字符串

Question

嗨，有可能用URL類型驗證輸入標簽嗎？

我目前有一個URL類型的輸入標簽，供用戶鍵入URL，如果用戶鍵入的值不是URL，也可以。

但是，當用戶鍵入“ http：// www 。”時，我的輸入字段會接受它，並將表單發布到服務器，這是不正確的值。 如何檢查輸入字段中的空值以驗證空URL？

這是我的表單接受帶有空url的url鏈接的幾種情況：

1. http：// www 。
2. 萬維網。
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]);
}

Answer 2

您可以使用jQuery表單驗證。 （您可以在應用程序中導入jQuery Validation並將其用於所有表單字段）。

$('#form').validate({
rules : {
    'bannerUrl' : {
        required : true,
        url : true
    }
},
messages : {
    'bannerUrl' : {
        required : "This field is required",
        url : "Please enter valid URL"
    }
},

}）

Answer 3

您可以使用以下正則表達式來驗證URL。

_^(?:(?:https?|ftp)://)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\x{00a1}-\x{ffff}0-9]+-?)*[a-z\x{00a1}-\x{ffff}0-9]+)(?:\.(?:[a-z\x{00a1}-\x{ffff}0-9]+-?)*[a-z\x{00a1}-\x{ffff}0-9]+)*(?:\.(?:[a-z\x{00a1}-\x{ffff}]{2,})))(?::\d{2,5})?(?:/[^\s]*)?$_iuS

如果該網址與上述正則表達式匹配，則該網址很有可能在語法上有效。 如果您不希望使用這種冗長而完整的方式，則可以從URL Valid Regex中選擇一種正則表達式 。

如果要根據需要修改正則表達式，請測試正則表達式 ，然后繼續。

Answer 4

var urlexp = new RegExp('(http|ftp|https)://[a-z0-9\-_]+(\.[a-z0-9\-_]+)+([a-z0-9\-\.,@\?^=%&;:/~\+#]*[a-z0-9\-@\?^=%&;/~\+#])?', 'i');

在javascript中使用此正則表達式，如果有效，則將該值傳遞回php，否則發布警告說錯誤。

Answer 5

在if條件下將輸入字段值傳遞給此函數，它將返回true或false

    <script>
    function isValidUrl(url) {
         var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?     (\/|\/([\w#!:.?+=&%@!\-\/]))?/
         return regexp.test(url);
     }

      isValidUrl(yourURL);
     </script>