Question

在我的输入字段验证中，我将输入类型设置为“url”。

具有协议“http：//”或“https：//”的URL有效。没有它，网址无效。

有效：http://www.foo.com

有效：https://www.foo.com

无效：www.foo.com

无效：foo.com

在我的代码中，每当URL链接没有“http：//”或“https：//”时，函数“checkURL（）”将添加它，如下面的代码所示。

// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});

function checkURL(url) {
    var string = url.value;
    
    if (!~string.indexOf("http")) {
        string = "http://" + string;
    }
    
    url.value = string;
    return url;
}

<form id="myform">
	<label for="field">Required, URL: </label><br>
	<input type="url" id="field" name="field" onblur="checkURL(this)">
</form>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

在摘录中，我输入“www.yahoo.com”。

当我在字段外单击时，函数checkURL将“http：//”添加到我的输入中，因此我得到“http://www.yahoo.com”。

问题是在添加“http：//”之后，jQuery验证仍然认为URL无效。

我必须单击输入字段，然后再次单击它以使其知道它是有效的。

在我们输入没有协议的网址（即：www.yahoo.com）后，有没有办法让验证有效？

编辑：我忘记输入我的代码type="url"作为输入字段。

不应该更改为type =“text”

Answer 1

尝试使用onchange而不是onblur

＆＃13;

// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});

function checkURL(url) {
    var string = url.value;
    
    if (!~string.indexOf("http")) {
        string = "http://" + string;
    }
    
    url.value = string;
    return url;
}

＆＃13;

<form id="myform">
	<label for="field">Required, URL: </label><br>
	<input type="url" id="field" name="field" onchange="checkURL(this)">
</form>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

＆＃13;

What is the difference between onBlur and onChange attribute in HTML?

Answer 2

我认为使用jquery.validation自己的方式更为正确。

参考链接：https://jqueryvalidation.org/normalizer/

rules: {
        website: {
            url: true,
            normalizer: function (value){
                value = value.replace(/^https?:\/\//, '');
                return 'http://' + value;
            }
        }

如何在没有协议的情况下对输入类型url使用jQuery验证？

2 个答案: