Question

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

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

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

以下几种情况我的表单接受了带有空网址的网址链接：

http://www。
万维网。
的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 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);
    }
})

正则表达方式

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

您可以使用以下正则表达式验证网址。

_^(?:(?: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与上述正则表达式匹配，则概率很高，给定的url在语法上是有效的。如果您不想要这么冗长且完整的证明方式，那么您可以从URL Valid Regex中选择一个正则表达式。

如果您想根据您的要求修改正则表达式，请test 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>

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

5 个答案: