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

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

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

本文介紹的是使用jQuery正則表達(dá)式在前臺(tái)頁面驗(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à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)址格式不正確！請重新輸入");
   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é)

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

您可能感興趣的文章:

相關(guān)文章

jQuery 判斷頁面元素是否存在的代碼
在傳統(tǒng)的Javascript里，當(dāng)我們對某個(gè)頁面元素進(jìn)行某種操作前，最好先判斷這個(gè)元素是否存在。原因是對一個(gè)不存在的元素進(jìn)行操作是不允許的。
2009-08-08
Jquery在指定DIV加載HTML示例代碼
這篇文章主要介紹了Jquery如何在指定DIV加載HTML,需要的朋友可以參考下
2014-02-02
Jquery選擇器中使用變量實(shí)現(xiàn)動(dòng)態(tài)選擇例子
這篇文章主要介紹了Jquery選擇器中使用變量實(shí)現(xiàn)動(dòng)態(tài)選擇例子,這樣做的好處我們可以動(dòng)態(tài)選擇一些元素,核心思想其實(shí)就是用字符串組合,需要的朋友可以參考下
2014-07-07
jQuery操作input值的各種方法總結(jié)
這篇文章主要介紹了jQuery操作input值的各種方法總結(jié)，有需要的朋友可以參考一下
2013-11-11
JQuery的attr 與 val區(qū)別
這篇文章主要介紹了JQuery的attr 與 val區(qū)別的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
jQuery可見性過濾選擇器用法示例
這篇文章主要介紹了jQuery可見性過濾選擇器用法,結(jié)合實(shí)例形式分析了jQuery針對元素hidden屬性的過濾操作相關(guān)技巧,需要的朋友可以參考下
2016-09-09
jquery驗(yàn)證郵箱格式是否正確實(shí)例講解
這篇文章主要介紹了一個(gè)jquery驗(yàn)證郵箱格式是否正確的實(shí)踐案例，利用正則表達(dá)式進(jìn)行驗(yàn)證，感興趣的小伙伴們可以參考一下
2015-11-11
如何讓你的Lightbox支持滾輪縮放及Base64圖片
本文主要是記錄了1、修改Lightbox源碼使支持滾輪縮放；2、修改Lightbox源碼使圖片的源可支持base64格式；3、如何將Lightbox應(yīng)用到已有的文章。非常的簡單實(shí)用，正在使用lightbox的小伙伴可以重點(diǎn)看下，應(yīng)用到自己項(xiàng)目中，立刻高大上了
2014-12-12
jQuery實(shí)現(xiàn)列表的全選功能
本文給大家分享的是使用jquery實(shí)現(xiàn)的全選刪除插件的代碼，非常的實(shí)用，本文示例是結(jié)合的ThinkPHP,小伙伴們可以自由擴(kuò)展。
2015-03-03
jQuery的基本概念與高級編程
這篇文章主要介紹了jQuery的基本概念與高級編程的簡單介紹，有需要的小伙伴可以參考下。
2015-05-05