如果没有 jQuery 验证字段作为 URL，如何在 MVC 4 中使用 type="url"？

Posted 2023-02-22

【中文标题】如果没有 jQuery 验证字段作为 URL，如何在 MVC 4 中使用 type="url"？

【英文标题】：How can you use type="url" in MVC4 without jQuery validating the field as a URL?

【发布时间】：2012-08-26 18:50:42

【问题描述】：

情况如下：我有一个很棒的大文本输入框，用于输入 URL：https://asafaweb.com

不过，这不需要遵守 URL 的严格定义；我允许没有方案的地址，然后出于可用性目的默认使用 HTTP。例如，“***.com”将被视为有效 URL。但也有一些 URL 由于各种原因我不想允许（即它们已被列入黑名单或它们是内部 IP 地址范围）。

我想将输入的类型设置为“url”而不是默认的“text”，以便移动设备上的用户获得专为 URL 上下文设计的键盘（即 ios 为您提供“.com”按钮），问题是，一旦我这样做了，与 ASP.NET MVC 捆绑的默认不显眼的 jQuery 验证需要一个带有方案的 URL，从而破坏了我的无方案 URL 支持。

这是一个 MVC4 网站，我有一个这样的 html 助手：

@Html.TextBoxFor(m => m.ScanUrl, new  type = "url" )

然后，ScanUrl 属性有一个自定义 ValidationAttribute，它会执行所有定制检查以确保可以扫描 URL。

如何在不插入 jQuery 验证并确保 URL 是 strict URL 的情况下保持现有验证模式？

【问题讨论】：

如何添加一个像 data-validationtype="schemeless" 这样的数据属性并修改 validate url 例程来检查它，如果存在调用一个方法来进行无方案 url 正则表达式检查？

除上述内容外，您还可以在单​​独包含的内容中覆盖 url 检查 www.bennadel.com/blog/1624-Ask-Ben-Overriding-Core-jQuery-Methods.htm 的验证方法甚至不需要修改核心代码

Troy，您确定是 MVC 验证失败，而不是实际输入控件上的内置浏览器验证吗？您从哪里得到实际的弹出窗口，告诉您可以输入您输入的 URL，它在不同的浏览器中看起来是否不同？

跟进最后一条评论，您可以在包含 html 输入标签的表单上放置一个 'novalidate' 属性（假设它是浏览器验证而不是 JQ），这里还有一些想法：***.com/questions/3090369/…

绝对是 jQuery 验证伙伴，它使用的是 MVC3/4 实现的不显眼的验证。

【参考方案1】：

如果您在本网站的任何地方都不需要严格的 URL 验证，那么修改 jQuery Validation 验证 URL 的方式可能是处理该问题的最简单方法。如果您使用的是 MVC 4 附带的版本，您会在 jquery.validate.js 的第 1034 行找到它。

您可以在插件脚本中调整正则表达式，或者您可以在加载 jQuery Validation 后修补 url 验证方法：

<script src="/Scripts/jquery.validate.js"></script>
<script>
  // To no-op url validation completely.
  jQuery.validator.methods.url = function(value, element) 
    return this.optional(element) || true;
  ;

  // Or, continue validating everything else as previously, 
  //  but not require the protocol (double check my change to the regex...).
  jQuery.validator.methods.url = function(value, element) 
    return this.optional(element) || /^(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]2)|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]2)|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]2)|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]2)|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]2)|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
  ;    
</script>

之后对其进行修补的主要优势在于，您不必依赖于脚本的调整版本，并且可以在以后更新 jQuery Validation 本身而不会丢失您自定义的 url 验证器。这对您来说可能很明显，但可能有助于其他人稍后找到此答案。

【讨论】：

最佳答案戴夫，完全覆盖验证正是我所需要的。谢谢！

【参考方案2】：

您还可以告诉 jQuery Validation 插件根据您指定的选择器选择性地忽略输入字段，该选择器可以是您添加到所有要忽略的元素的类，例如 class="ignorejQueryValidate"，或者在您的情况下，所有带有 @ 的输入987654323@.

请参阅验证插件的validate() 方法中jQuery docs 中有关ignore 选项的部分。

@using (Html.BeginForm("SomeAction", "SomeController", FormMethod.Post, new  id = "myForm"))

    @Html.TextBoxFor(m => m.ScanUrl, new  type = "url", @class = "ignorejQueryValidate" )


$("#myForm").validate(
    ignore: ".ignorejQueryValidate"
);

或

@using (Html.BeginForm("SomeAction", "SomeController", FormMethod.Post, new  id = "myForm" ))

    @Html.TextBoxFor(m => m.ScanUrl, new  type = "url" )


$("#myForm").validate(
    ignore: "input[type=url]"
);

【讨论】：

我不知道这在 ASP.NET MVC 的上下文中是否可以正常工作，因为 MVC 的“非侵入式验证”脚本会根据数据属性自动在表单上调用自己的.validate()在输入。如果需要第二个.validate() 调用来设置忽略选择器，我认为一个会取代另一个。此外，忽略输入还会禁用 Troy 仍希望保留的“必需”验证。

【参考方案3】：

您可以使用 javascript 自动将架构添加到输入中的 URL（如果它不存在于焦点输出/更改上）。

【讨论】：

不是很理想，因为我不想更改输入的字符串。如果服务器端验证失败并且他们留在页面上，我希望他们看到他们最初输入的相同字符串。

你可以完全关闭客户端验证，只在服务器上验证：@Html.TextBoxFor(m => m.ScanUrl, new Dictionary<string,Object> "type", "url", "data-val", "false" )

不高兴，即使将属性渲染到输入，它仍然可以验证。此外，我不希望丢失客户端上的强制字段验证，首选仍然是让 url 类型表现得像文本类型。