html5< input>标记验证URL [英] html5 <input> tag validation for URL

问题描述

我试图验证使用JavaScript的URL，但由于某种原因，它不工作。当有人没有输入任何URL时，它会显示如

的消息请输入有效的URL（即http：//）

我试图从过去4小时内解决它，但它不工作

  html5中是否有任何验证URL的技巧？ 
  

请帮助我解决这个问题

<$ p $ （
$（＃contactInfos）。validate（
{onfocusout：false，rules：{
phone ：{number：true}，
zipcode：{number：true}，
website：{url：true}
}，
messages：{phone：{number：please只输入数字}，
zipcode：{number：仅输入数字}，
网站：{url：请输入有效的网址（即http：//）}
}

}）;

验证网址的方法

  url：function（value，element）{
 values = value.split（'，'）; 
 for（ x的值）
 {
 temp = values [x] .trim（）; 
 temp1 = this.optional（element）|| / ^（https？| ftp）：\ / \ /（（（（[AZ] | \d |  -  |。\ | _ |〜| [\\\ -\\\퟿\\\豈-\\\﷏\\\ﷰ-\\\￯]）| （％[\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 [O- 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]））|（（（[AZ] | \d | [\\\ -\\\퟿\\\豈-\\\﷏\\\ﷰ-\\\￯]）|（（[AZ] | \d | [\\\ -\\\퟿\\\豈-\\\﷏ \\\ﷰ-\\\￯]）（[AZ] | \d |  -  |。\ | _ |〜| [\\\ -\\\퟿\\\豈-\\\﷏\\\ﷰ-\\\￯ ]）*（[AZ] | \d |。[\\\ -\\\퟿\\\豈-\\\﷏\\\ﷰ-\\\￯]）））\）+（（[AZ] | [ \\\ -\\\퟿\\\豈-\\\﷏\\\ﷰ-\\\￯]）|（（[AZ] | [\\\ -\\\퟿\\\豈-\\\﷏\\\ﷰ-\\ \￯]）（[AZ] | \d |  -  |。\ | _ |〜| [\\\ -\\\퟿\\\豈-\\\﷏\\\ﷰ-\\\￯]）*（[ AZ] | [\\\ -\\\퟿\\\豈-\\\﷏\uF DF0-\\\￯]）））\）（：？？\d *））（\ /（（（[AZ] | \d |  -  | \ | _ |〜| [\\ \ -\\\퟿\\\豈-\\\﷏\\\ﷰ-\\\￯]）|（％[\da-F] {2}）| [\ $&安培;！'\（\ ）\ * \ +; =] |：| @）+（\ /（（[AZ] | \d |  -  | \ | _ |〜| [\\\ -\\\퟿\\。 \豈-\\\﷏\\\ﷰ-\\\￯]）|（％[\da-F] {2}）| [\ $&安培;！'\（\）\ * \ + ？，; =] |：| @）*）*））（\（（（[AZ] | \d |  -  | \ | _ |〜| [\\\ -\\\퟿\\？。 \豈-\\\﷏\\\ﷰ-\\\￯]）|（％[\da-F] {2}）| [\ $&安培;！'\（\）\ * \ + ？，; =] |：| @）| [\\\-\\\] | \ / | \）*）（\＃（（（[AZ] | \d |  -  | \ 。| _ |〜| [\\\ -\\\퟿\\\豈-\\\﷏\\\ﷰ-\\\￯]）|（％[\da-F] {2}）|！[\ $ &安培;'\（\）\ * \ +; =] |：？| @）| \ / | \）*）$ / i.test（临时）; 
 
 if（temp1！= true）
 {
 return false; 
} 
} 
返回true; 
}，
  

感谢

解决方案

在html5中，您可以使用标记输入type =url：

 < ; input type =url/> 
  

您也可以使用您自己的模式：

 < input type =urlpattern =https？：//.+required /> 
  

在统一资源标识符（URI）：通用语法[RFC3986] http://www.ietf.org/rfc/rfc3986.txt URI的正则表达式是：

例如，将上述表达式与

$ b匹配
$ b

  http://www.ics.uci.edu/pub/ietf/uri/#Related 
  

会导致以下子表达式匹配：

  $ 1 = http：
 $ 2 = http 
 $ 3 = //www.ics.uci.edu 
 $ 4 = www.ics.uci.edu 
 $ 5 = / pub / ietf / uri / 
 $ 6 =<未定义> 
 $ 7 =<未定义> 
 $ 8 = #Related 
 $ 9 =相关
  

i am trying to validate URL using javascript but for some reason its not working. when someone not enter any URL it shows message like

"Please enter valid URL.(i.e. http://)"

i am trying to fix it from last 4 hours but its not working

is there any trick in html5 that validate the URL?

please help me regarding this

$(document).ready(function() { 
$("#contactInfos").validate( 
 { onfocusout: false, rules: { 
       phone: { number:true }, 
       zipcode: { number:true }, 
       website: {    url:true    } 
 }, 
     messages: { phone: { number:"please enter digit only" }, 
     zipcode: { number:"Plese enter digit only"  }, 
     website: { url: "Please enter valid URL.(i.e. http://)"     } 
   } 

});

validate method for url

url: function(value, element) {
      values=value.split(',');
      for (x in values)
      {
          temp=values[x].trim();
  temp1=this.optional(element) || /^(https?|ftp):\/\/(((([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(temp);

      if(temp1!=true)
      {
        return false;
      }
      }
       return true;
},

Thanks

解决方案

In html5 you can use the tag input type="url":

<input type="url" />

you can use your own pattern too:

<input type="url" pattern="https?://.+" required /> 

In the paper Uniform Resource Identifier (URI): Generic Syntax [RFC3986] http://www.ietf.org/rfc/rfc3986.txt the regular expression for a URI is:

^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?

For example, matching the above expression to

  http://www.ics.uci.edu/pub/ietf/uri/#Related

results in the following subexpression matches:

  $1 = http:
  $2 = http
  $3 = //www.ics.uci.edu
  $4 = www.ics.uci.edu
  $5 = /pub/ietf/uri/
  $6 = <undefined>
  $7 = <undefined>
  $8 = #Related
  $9 = Related

这篇关于html5&lt; input&gt;标记验证URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！