快捷導(dǎo)航

利用jquery正則表達(dá)式在頁(yè)面驗(yàn)證url網(wǎng)址輸入是否正確

更新時(shí)間：2017年04月04日 09:52:29 作者：我是干勾魚(yú)

這篇文章主要介紹了關(guān)于利用jquery正則表達(dá)式在頁(yè)面驗(yàn)證url網(wǎng)址輸入是否正確的相關(guān)資料，文中給出了完整的示例代碼，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。

本文介紹的是使用jQuery正則表達(dá)式在前臺(tái)頁(yè)面驗(yàn)證url網(wǎng)址輸入是否正確，代碼如下：

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

/**
 * 前臺(tái)頁(yè)面驗(yàn)證url網(wǎng)址輸入是否正確
 */
function postComment() {

 //驗(yàn)證url網(wǎng)址
 if($("input[name='url']").val()) {
  var str=$("input[name='url']").val();
  //判斷URL地址的正則表達(dá)式為:http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
  //下面的代碼中應(yīng)用了轉(zhuǎn)義字符"\"輸出一個(gè)字符"/"
  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
  var objExp=new RegExp(Expression);

  if(objExp.test(str) != true){

   alert("網(wǎng)址格式不正確！請(qǐng)重新輸入");
   return false;
  } else {
      alert("網(wǎng)址正確！");
    }

 }

}

</script>

</head>
<body>

<div class="form-group">

 <input class="form-url" type="text" placeholder="網(wǎng)址(可選)" name="url" maxlength="50"></input>

</div>

<input class="btn btn-primary" type="submit" value="提交" name="submit" onclick="return postComment()" />

</body>
</html>

如果隨便輸入一個(gè)url網(wǎng)址，則顯示：

輸入一個(gè)正確的，則顯示：

當(dāng)然，使用https也是應(yīng)該設(shè)置為正確的，如圖：

主要是在jquery代碼中加入了與url網(wǎng)址相關(guān)的正則表達(dá)式的驗(yàn)證。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

jQuery通過(guò)控制節(jié)點(diǎn)實(shí)現(xiàn)僅在前臺(tái)通過(guò)get方法完成參數(shù)傳遞
這篇文章主要介紹了jQuery通過(guò)控制節(jié)點(diǎn)實(shí)現(xiàn)僅在前臺(tái)通過(guò)get方法完成參數(shù)傳遞的功能,實(shí)例分析了jQuery操作節(jié)點(diǎn)的技巧與控制前臺(tái)get方法傳遞參數(shù)的用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
實(shí)例詳解jQuery的鏈?zhǔn)骄幊田L(fēng)格
jQuery中的鏈?zhǔn)讲僮?，它讓代碼變得更有層次更簡(jiǎn)潔，所以這篇文章主要給大家介紹了關(guān)于jQuery鏈?zhǔn)骄幊田L(fēng)格的相關(guān)資料,需要的朋友可以參考下
2021-06-06
基于jquery的地址欄射擊游戲代碼
地址欄射擊游戲!對(duì)，你沒(méi)看錯(cuò)，就是在地址欄上玩的游戲，有圖有真相！之前在網(wǎng)上看到這個(gè)小游戲，可惜在墻外，中午研究了一下，搬到國(guó)內(nèi)來(lái)了，看看吧！
2011-03-03
Eclipse配置Javascript開(kāi)發(fā)環(huán)境圖文教程
這篇文章主要介紹了Eclipse配置Javascript開(kāi)發(fā)環(huán)境圖文教程,需要的朋友可以參考下
2015-01-01
jQuery插件MixItUp實(shí)現(xiàn)動(dòng)畫(huà)過(guò)濾和排序
MixItUp過(guò)濾排序jQuery插件是一款鼠標(biāo)滑過(guò)圖片顯示描述的jQuery過(guò)濾排序插件。是一款輕量，但功能強(qiáng)大的 jQuery 插件，提供了對(duì)分類和有序內(nèi)容的美麗的動(dòng)畫(huà)過(guò)濾和排序功能。特別適合用于作品集網(wǎng)站，畫(huà)廊，圖片博客以及任何的分類或有序內(nèi)容。
2015-04-04
jQuery實(shí)現(xiàn)淡入淡出效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)淡入淡出效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
jquery操作select詳解(取值,設(shè)置選中)
本篇文章主要是對(duì)jquery操作select(取值,設(shè)置選中)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
jquery分頁(yè)插件AmSetPager(自寫(xiě))
第一次做的插件，我這個(gè)插件好像使用有些另類，是調(diào)用數(shù)據(jù)展示容器的元素$(#DataContent).AmSetPager({...});在參數(shù)中配置分頁(yè)容器元素ID。寫(xiě)完插件后看別的插件都是調(diào)用分頁(yè)元素ID
2013-04-04
jquery ajax執(zhí)行后臺(tái)方法
jquery ajax調(diào)用動(dòng)態(tài)網(wǎng)頁(yè)內(nèi)容的方法，其實(shí)下面的這個(gè)例子很簡(jiǎn)單的返回?cái)?shù)據(jù)。
2010-03-03
jquery 子窗口操作父窗口的代碼
jquery 子窗口操作父窗口的實(shí)現(xiàn)代碼。
2009-09-09