URL的html5 <input>标记验证

Question

我试图使用JavaScript验证URL但由于某种原因它无法正常工作.当有人没有输入任何URL时,它会显示消息

__CODE__

我试图解决它从过去4小时,但它无法正常工作

$(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://)"     } 
   } 

});

请帮我解决这个问题

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;
},

验证url的方法

$(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://)"     } 
   } 

});

谢谢

Answer 1

在html5中,您可以使用标签输入type ="url":

<input type="url" />

你也可以使用你自己的模式:

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

在文章统一资源标识符(URI):通用语法[RFC3986] http://www.ietf.org/rfc/rfc3986.txt中,URI的正则表达式是:

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

例如,将上面的表达式与之匹配

  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 = <undefined>
  $7 = <undefined>
  $8 = #Related
  $9 = Related