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

發(fā)布時(shí)間：2020-10-07 04:13:53 來(lái)源：腳本之家閱讀：277 作者：我是干勾魚(yú) 欄目：web開(kāi)發(fā)

本文介紹的是使用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è)正確的，則顯示：

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

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

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

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

總結(jié)

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

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽