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

Posted 2023-05-09

【中文标题】如何在没有协议的情况下对输入类型 url 使用 jQuery 验证？

【英文标题】：How to use jQuery validation for the input type url without the protocol?

【发布时间】：2017-03-16 11:25:06

【问题描述】：

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

具有“http://”或“https://”协议的 URL 有效。 没有它，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>

在 sn-p 上，我输入“www.yahoo.com”。

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

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

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

在我们输入一个没有协议的 url（即：www.yahoo.com）后，有没有办法使验证有效？

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

不应更改为 type="text"

【问题讨论】：

How to extend jquery.validate URL validation?的可能重复

@Dekel 我忘了为输入标签添加 type="url" 。您给我的链接仅在类型设置为“文本”时才有效，但是当它设置为“url”时，代码无法更新该字段并且仍然将 www.site.com 或 site.com 视为错误。

【参考方案1】：

尝试使用 onchange 代替 onblur

// 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" 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>

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

【参考方案2】：

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

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

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