這篇文章運(yùn)用簡單易懂的例子給大家介紹如何使用javascript的正則表達(dá)式來驗(yàn)證表單，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

思南網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)于2013年開始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

在之前的文章【js如何進(jìn)行表單的簡單密碼驗(yàn)證？】中我們通過示例介紹一種比較全面的驗(yàn)證表單的方法，它會(huì)檢查我們想要檢查的所有內(nèi)容，但是它使用了大量代碼來單獨(dú)測試每個(gè)需求并顯示不同的錯(cuò)誤消息。

如何使用少量的代碼也可以實(shí)現(xiàn)效果？相信有很多人會(huì)有這樣的疑問。其實(shí)也簡單，使用正則表達(dá)式就可以解決這個(gè)問題。

我們通過表單的密碼驗(yàn)證來看看javascript的正則表達(dá)式驗(yàn)證表單的方法。

HTML代碼：

<form method="POST" action="" onsubmit="return checkForm(this);">

<p>密&nbsp;&nbsp;碼: <input type="password" name="pwd1"><span> </p>
<p>確認(rèn)密碼: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>

js的checkForm()函數(shù)驗(yàn)證密碼，調(diào)用正則表達(dá)式：

  function checkForm(form)
  {
    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(!checkPassword(form.pwd1.value)) {
        alert("您輸入的密碼無效！");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("錯(cuò)誤：請檢查您輸入并確認(rèn)您的密碼！");
      form.pwd1.focus();
      return false;
    }
    return true;
  }

js正則表達(dá)式：

function checkPassword(str)
  {
    var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
    return re.test(str);
  }

效果，輸入密碼（123456）：

這里使用的表達(dá)式類型稱為“l(fā)ook-ahead”，它試圖將包含的正則表達(dá)式與字符串的“future”部分進(jìn)行匹配。

翻譯一下（上述正則表達(dá)式實(shí)現(xiàn)的功能）：

1、匹配六個(gè)或更多字符的字符串;

2、包含至少一個(gè)數(shù)字（\ d是[0-9]的簡寫）;

3、至少一個(gè)小寫字符

4、至少一個(gè)大寫字符

測試一下：

如果要將密碼限制為僅需要字母和數(shù)字（無空格或其他字符），則只需稍作更改即可。我們使用通配符\ w，就可以完成：

改良后的正則表達(dá)式：

function checkPassword(str)
  {   
    var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}$/;
    return re.test(str);
  }

該\ W是“任何字母，數(shù)字或下劃線”的簡寫。

其實(shí)限制使用哪些字符不是好的做法，因?yàn)闃?biāo)點(diǎn)符號(hào)和其他符號(hào)提供額外的安全性。

正則表達(dá)式驗(yàn)證表單的示例：

html代碼：

<form method="POST" action="" onsubmit="return checkForm(this);">
<p>&nbsp;&nbsp;用&nbsp;戶&nbsp;名: <input type="text" name="username"><span>  （輸入必須只包含字母、數(shù)字和下劃線）</span></p>
<p>&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;碼: <input type="password" name="pwd1"><span>  （輸入必須包含至少一個(gè)數(shù)字/小寫/大寫字母，并且長度至少為六個(gè)字符）</span></p>
<p>確認(rèn)密碼: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>

js代碼：

  function checkPassword(str)
  {
    var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
    return re.test(str);
  }
  function checkForm(form)
  {
    if(form.username.value == "") {
      alert("Error: Username cannot be blank!");
      form.username.focus();
      return false;
    }
    re = /^\w+$/;
    if(!re.test(form.username.value)) {
      alert("錯(cuò)誤：用戶名必須只包含字母、數(shù)字和下劃線！");
      form.username.focus();
      return false;
    }
    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(!checkPassword(form.pwd1.value)) {
        alert("您輸入的密碼無效！");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("錯(cuò)誤：請檢查您輸入并確認(rèn)您的密碼！");
      form.pwd1.focus();
      return false;
    }
    return true;
  }

大功告成！

效果圖：

總結(jié)：如你所見，正則表達(dá)式非常值得我們學(xué)習(xí)。它們不僅可以用在JavaScript中，還可以用于PHP，Perl，Java和許多其他語言。一些文本編輯器（不僅僅是vi）在搜索或替換文本時(shí)也允許它們。

關(guān)于如何使用javascript的正則表達(dá)式來驗(yàn)證表單就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享文章：如何使用javascript的正則表達(dá)式來驗(yàn)證表單
網(wǎng)址分享：http://aaarwkj.com/article24/iipoje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、服務(wù)器托管、品牌網(wǎng)站制作、全網(wǎng)營銷推廣、電子商務(wù)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)