javascript如何使用正規表示式來驗證表單？ （程式碼範例）

本篇文章帶給大家的內容是介紹javascript使用正規表示式來驗證表單的方法（程式碼範例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

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

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

我們透過表單的密碼驗證來看看javascript的正規表示式驗證表單的方法。

HTML程式碼：

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

<p>密  码: <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>  用 户 名: <input type="text" name="username"><span>  （输入必须只包含字母、数字和下划线）</span></p>
<p>  密     码: <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如何使用正規表示式來驗證表單？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！