如何使用javascript的正則表達式來驗證表單

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

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

如何使用少量的代碼也可以實現效果？相信有很多人會有這樣的疑問。其實也簡單，使用正則表達式就可以解決這個問題。

我們通過表單的密碼驗證來看看javascript的正則表達式驗證表單的方法。

HTML代碼：

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

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

js的checkForm()函數驗證密碼，調用正則表達式：

  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("錯誤：請檢查您輸入并確認您的密碼！");
      form.pwd1.focus();
      return false;
    }
    return true;
  }

js正則表達式：

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

效果，輸入密碼（123456）：

這里使用的表達式類型稱為“look-ahead”，它試圖將包含的正則表達式與字符串的“future”部分進行匹配。

翻譯一下（上述正則表達式實現的功能）：

1、匹配六個或更多字符的字符串;

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

3、至少一個小寫字符

4、至少一個大寫字符

測試一下：

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

改良后的正則表達式：

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

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

其實限制使用哪些字符不是好的做法，因為標點符號和其他符號提供額外的安全性。

正則表達式驗證表單的示例：

html代碼：

<form method="POST" action="" onsubmit="return checkForm(this);">
<p>&nbsp;&nbsp;用&nbsp;戶&nbsp;名: <input type="text" name="username"><span>  （輸入必須只包含字母、數字和下劃線）</span></p>
<p>&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;碼: <input type="password" name="pwd1"><span>  （輸入必須包含至少一個數字/小寫/大寫字母，并且長度至少為六個字符）</span></p>
<p>確認密碼: <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("錯誤：用戶名必須只包含字母、數字和下劃線！");
      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("錯誤：請檢查您輸入并確認您的密碼！");
      form.pwd1.focus();
      return false;
    }
    return true;
  }

大功告成！

效果圖：

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

關于如何使用javascript的正則表達式來驗證表單就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。