快捷導(dǎo)航

js利用正則表達(dá)式檢驗(yàn)輸入內(nèi)容是否為網(wǎng)址

更新時(shí)間：2016年07月05日 09:16:23 作者：yongh701

這篇文章主要為大家詳細(xì)介紹了js利用正則表達(dá)式檢驗(yàn)輸入內(nèi)容是否為網(wǎng)址的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

js正則檢驗(yàn)輸入的是否為網(wǎng)址功能在網(wǎng)頁中也是很常見的，友情鏈接部分、表單填寫個(gè)人主頁的時(shí)候，使用JavaScript取驗(yàn)證是否為網(wǎng)址。

這個(gè)檢驗(yàn)不好寫，最好還是使用正則表達(dá)式去認(rèn)證。

規(guī)定，輸入的東西只能是http://與https://開頭，而且必須是網(wǎng)址。

有人說，為何像www.1.com這樣的網(wǎng)頁不行呢？

這是以免你拿用戶輸入的東西構(gòu)造超級鏈接的時(shí)候，a標(biāo)簽中的href屬性如果遇不到http://或者h(yuǎn)ttps://的東西，那么就會(huì)認(rèn)為是根目錄，會(huì)在你的網(wǎng)站的網(wǎng)址后面接著寫入這個(gè)地址再跳轉(zhuǎn)，這個(gè)大家應(yīng)該知道。比如<a href="www.1.com">xxx</a>，我的網(wǎng)址是http://localhost，那么點(diǎn)擊這個(gè)顯示為xxx的a標(biāo)簽之后，則只是跳到http://localhost/www.1.com這個(gè)位置，當(dāng)然不對了。

比如如下的文本框，如何利用正則表達(dá)式做到要求用戶輸入的必須是http://與https://開頭的網(wǎng)址呢？

1、首先是一個(gè)簡單的布局，這個(gè)不用說了：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>

<body>
網(wǎng)址必須以http://或者h(yuǎn)ttps://開頭，且必須是個(gè)網(wǎng)址^_^！<br />
<input type="text" id="url" />
<button onclick="CheckUrl()">確定</button>
</body>
</html>

2、其次是腳本，其實(shí)也不用說了，關(guān)鍵是那條正則表達(dá)式：

 <script>
function CheckUrl(){
 var url=document.getElementById("url").value;
 var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
 if(!reg.test(url)){
 alert("這網(wǎng)址不是以http://https://開頭，或者不是網(wǎng)址！");
 }
 else{
 alert("輸入成功");
 }
}
</script>

在： var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;之中，
1、Javascript之中，由于所有變量都是var，因此正則表達(dá)式必須寫在兩個(gè)斜杠之中，/.../，然后正則表達(dá)式里面的斜杠/必須寫成\/
2、^表示必須以……開頭，[]表示一個(gè)檢驗(yàn)單位，也就是某個(gè)字符可以容納的東西，比如^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)，就是要求以http://或者h(yuǎn)ttps://開頭的意思。|是或者，第一個(gè)字符是h或者H，第二、三個(gè)字符是[tT]，{2}是包括這個(gè)字符與其后面的1個(gè)字符都必須為[tT]的意思，之后以此類推
3、([A-Za-z0-9-~]+)表示，包括這個(gè)字符及其隨后的字符都必須大寫字母、小寫字母、數(shù)字、減號(hào)-或者是~
字符+的意思是：匹配+號(hào)前面的字符1次或n次，例如：/a+/匹配"candy"中的'a'和"caaaaaaandy"中的所有'a'.
4、因此(([A-Za-z0-9-~]+)\.)+則表示XXX.這個(gè)以點(diǎn)結(jié)尾的東西，必須在([A-Za-z0-9-~\/])+$這個(gè)字符前面出現(xiàn)至少1次
5、$表示必須以大寫字母、小寫字母、數(shù)字、減號(hào)-、~、/結(jié)尾

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: