首頁 > 文章 > web前端 > 如何使用 JavaScript 驗證輸入是字母數字還是非字母數字？

如何使用 JavaScript 驗證輸入是字母數字還是非字母數字？

王林轉載: 2023-08-24 10:33:021141瀏覽

如何使用 JavaScript 验证输入是字母数字还是非字母数字？

我們的任務是驗證輸入字串，需要使用 JavaScript 檢查它是否是字母數字。字母數字字串僅包含數字和字母字符，包括大寫或小寫字符，甚至不包含任何特殊字符或空格。

下面，我們將看到兩種驗證輸入字串的方法。

使用 charCodeAt() 方法

我們可以使用 charCodeAT() 方法來取得任意字元的 ASCII 值。在這裡，我們將遍歷字串的每個字元並檢查每個字元的 ASCII 值。 48 到 57 之間的 ASCII 碼表示數字字符，97 到 122 之間表示小寫字母字符，65 到 90 之間表示大寫字母字符。

因此，如果我們發現任何字元的 ASCII 值不在上面給定的 ASCII 範圍之間，我們就可以說該字串不是字母數字。

文法

使用者可以按照以下語法使用 charCodeAT() 方法檢查輸入字串是否為字母數字。

let charCode = char.charCodeAt(0);
if (!(charCode > 47 && charCode < 58) &&
   !(charCode > 96 && charCode < 123) &&
   !(charCode > 64 && charCode < 91)
) {
   // string is not alphanumeric
   return;
}

在上面的語法中，char 是單一字元。我們使用 charCodeAT() 方法來取得單一字元的 ASCII 值。之後，我們使用 if-else 語句來檢查字元的 ASCII 碼是否在數字和字母字元的 ASCII 值之間。

範例 1

在下面的範例中，我們建立了兩個包含各種字元的輸入字串。此外，我們也定義了 validateString() 函數。在 validateString() 函數中，我們使用 for-of 記憶體迭代每個字串字元。另外，我們使用 charCodeAt() 方法，透過傳遞 0 作為參數來取得字元的 ASCII 值。

然後，我們檢查是否有字元的 ASCII 碼不在數字和字母字元的 ASCII 範圍之間；我們可以說字串不是字母數字。

<html>
<body>
   <h3>Using the <i> for loop and charCodeAT() method </i> to check if input string is alphanumeric or not</h3>
   <div id = "output"> </div>
   <script>
      var output = document.getElementById('output');
      let str1 = "aredsUADFSKH121342kjbrewdfv";
      let str2 = "dfdrg rflrtke 435 3df;fd'gfdg";
      function validateString(string) {
         for (let char of string) {
            let charCode = char.charCodeAt(0);
            if (!(charCode > 47 && charCode < 58) &&  !(charCode > 96 && charCode < 123) &&    !(charCode > 64 && charCode < 91)
            ) {
               output.innerHTML += "The string " + string + " is not alphanumeric! </br>";
               return;
            }
         }
         output.innerHTML += "The string " + string + " is an alphanumeric! </br>"; 
      }
      validateString(str1);
      validateString(str2);
   </script>
</body>
</html>

使用正規表示式

我們可以使用帶有 new 關鍵字的 RegExp() 建構子來建立正規表示式。它是一個模式，我們可以將輸入字串與正規表示式模式進行匹配，並基於此返回 true 或 false 布林值。

文法

使用者可以按照以下語法使用正規表示式來驗證字母數字字串。

let strRegex = new RegExp(/^[a-z0-9]+$/i);
let result = strRegex.test(string);

在上面的語法中，結果變數包含基於字串是否為字母數字的布林值。

正規表示式解釋

^ - 表示字串的開頭。
[a-z0-9] - 僅表示 a 到 z 或 0 到 9 之間的字元。
$ - 表示字串的結尾。
i – 這是用於不區分大小寫字串比較的正規表示式的標誌。

範例 2

在下面的範例中，我們透過傳遞各種字串作為參數來呼叫 validateString() 函數。在函數中，我們創建瞭如上所述的常規解釋。之後，我們透過將正規表示式作為參考並將輸入字串作為驗證參數傳遞來使用 test() 方法。

如果 test() 方法傳回 true，則輸入字串為字母數字且僅包含數字和字母字元；否則，字串不是字母數字。

<html>
<body>
   <h3>Using the <i> Regular expression </i> to check if input string is alphanumeric or not</h3>
   <div id = "output"> </div>
   <script>
      var output = document.getElementById('output');
      let str1 = "Welcome to the tutorialsPoint";
      let str2 = "Hello123";
      function validateString(string) {
         
         // Defining the regular expression
         let strRegex = new RegExp(/^[a-z0-9]+$/i);
         
         // match the regex with the string
         let result = strRegex.test(string);
         if (result) {
            output.innerHTML += "The string " + string + " is an alphanumeric! </br>";
         } else {
            output.innerHTML += "The string " + string + " is not alphanumeric! </br>";
         }
      }
      validateString(str1);
      validateString(str2);
   </script>
</body>
</html>

範例 3

在下面的範例中，我們使用 Prompt () 方法從使用者取得字串。之後，我們使用正規表示式來驗證字串，就像我們在上面的範例中使用的那樣，但這裡我們使用了不同的正規表示式。

這裡，[^a-zA-Z0-9]代表任何不在a到z、A到Z、0到9之間的字元。因此，如果字串不是，test()方法傳回true字母數字和 false 對於字母數字字串。

<html>
<body>
   <h3>Using the <i> Regular expression </i> to check if input string is alphanumeric or not</h3>
   <div id = "output"> </div>
   <button onClick = "getInputAndValidate()"> Validate random string </button>
   <script>
      var output = document.getElementById('output');
      function getInputAndValidate() {
         let string = prompt("Enter a string to validate", "1232dwe");
         let strRegex = new RegExp(/[^a-zA-Z0-9]/);
         
         // match the regex with the string
         let result = strRegex.test(string);
         if (!result) {
            output.innerHTML += "The string " + string + " is an alphanumeric! </br>";
         } else {
            output.innerHTML += "The string " + string + " is not alphanumeric! </br>";
         }
      }
   </script>
</body>
</html>

我們在本教程中學習了驗證字母數字字串。我們使用兩種不同的正規表示式來驗證字母數字字串。另外，我們已經學習了使用 for 迴圈和 charCodeAT() 方法的簡單方法，但它的時間效率不高，因此不建議。

以上是如何使用 JavaScript 驗證輸入是字母數字還是非字母數字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript 正则表达式 if for 构造函数字符串 char 循环 regexp ASCII prompt

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何將 JavaScript 物件壓平為單深度物件？下一篇：如何將 JavaScript 物件壓平為單深度物件？

看更多