Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie kann ich mithilfe von JavaScript überprüfen, ob die Eingabe alphanumerisch oder nicht alphanumerisch ist?

王林
Freigeben: 2023-08-24 10:33:02
nach vorne
1070 Leute haben es durchsucht

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

Unsere Aufgabe besteht darin, die Eingabezeichenfolge zu validieren und mithilfe von JavaScript zu prüfen, ob sie alphanumerisch ist. Alphanumerische Zeichenfolgen enthalten nur numerische und alphabetische Zeichen, einschließlich Groß- und Kleinbuchstaben, und nicht einmal Sonderzeichen oder Leerzeichen.

Nachfolgend sehen wir zwei Methoden zur Validierung von Eingabezeichenfolgen.

Verwenden Sie die charCodeAt()-Methode

Wir können die Methode charCodeAT() verwenden, um den ASCII-Wert eines beliebigen Zeichens abzurufen. Hier durchlaufen wir jedes Zeichen der Zeichenfolge und überprüfen den ASCII-Wert jedes Zeichens. ASCII-Codes zwischen 48 und 57 stehen für numerische Zeichen, 97 und 122 für Kleinbuchstaben und 65 und 90 für Großbuchstaben.

Wenn wir also ein Zeichen finden, dessen ASCII-Wert nicht im oben angegebenen ASCII-Bereich liegt, können wir sagen, dass die Zeichenfolge nicht alphanumerisch ist.

Grammatik

Benutzer können die Methode charCodeAT() gemäß der folgenden Syntax verwenden, um zu überprüfen, ob die Eingabezeichenfolge alphanumerisch ist.

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

In der obigen Syntax ist char ein einzelnes Zeichen. Wir verwenden die Methode charCodeAT(), um den ASCII-Wert eines einzelnen Zeichens abzurufen. Danach verwenden wir eine if-else-Anweisung, um zu prüfen, ob der ASCII-Code des Zeichens zwischen den ASCII-Werten der numerischen und alphabetischen Zeichen liegt.

Beispiel 1

Im folgenden Beispiel haben wir zwei Eingabezeichenfolgen erstellt, die verschiedene Zeichen enthalten. Zusätzlich definieren wir die Funktion „validateString()“. In der Funktion „validateString()“ verwenden wir eine for-of-Schleife, um jedes Zeichenfolgenzeichen zu durchlaufen. Zusätzlich verwenden wir die Methode charCodeAt(), um den ASCII-Wert eines Zeichens zu erhalten, indem wir 0 als Argument übergeben.

Dann prüfen wir, ob es ein Zeichen gibt, dessen ASCII-Code nicht zwischen dem ASCII-Bereich numerischer und alphabetischer Zeichen liegt. Wir können sagen, dass die Zeichenfolge nicht alphanumerisch ist.

<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>
Nach dem Login kopieren

Verwenden Sie reguläre Ausdrücke

Wir können reguläre Ausdrücke mit dem RegExp()-Konstruktor und dem neuen Schlüsselwort erstellen. Es handelt sich um ein Muster, bei dem wir eine Eingabezeichenfolge mit einem regulären Ausdrucksmuster abgleichen und auf dieser Grundlage einen wahren oder falschen booleschen Wert zurückgeben können.

Grammatik

Benutzer können reguläre Ausdrücke verwenden, um alphanumerische Zeichenfolgen zu validieren, indem sie der folgenden Syntax folgen.

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

In der obigen Syntax enthält die Ergebnisvariable einen booleschen Wert, basierend darauf, ob die Zeichenfolge alphanumerisch ist oder nicht.

Regulärer Ausdruck erklärt

  • ^ – Stellt den Anfang der Zeichenfolge dar.

  • [a-z0-9]+ – stellt nur Zeichen zwischen a bis z oder 0 bis 9 dar.

  • $ – Stellt das Ende der Zeichenfolge dar.

  • i – Dies ist das Flag für reguläre Ausdrücke, die für Zeichenfolgenvergleiche ohne Berücksichtigung der Groß-/Kleinschreibung verwendet werden.

Beispiel 2

Im folgenden Beispiel rufen wir die Funktion „validateString()“ auf, indem wir verschiedene Zeichenfolgen als Parameter übergeben. In der Funktion erstellen wir die normale Interpretation wie oben. Danach verwenden wir die Methode test(), indem wir den regulären Ausdruck als Referenz und die Eingabezeichenfolge als Validierungsparameter übergeben.

Wenn die test()-Methode „true“ zurückgibt, ist die Eingabezeichenfolge alphanumerisch und enthält nur numerische und alphabetische Zeichen; andernfalls ist die Zeichenfolge nicht alphanumerisch.

<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>
Nach dem Login kopieren

Beispiel 3

Im folgenden Beispiel verwenden wir die Prompt()-Methode, um eine Zeichenfolge vom Benutzer abzurufen. Danach verwenden wir einen regulären Ausdruck, um die Zeichenfolge zu validieren, genau wie im obigen Beispiel, aber hier verwenden wir einen anderen regulären Ausdruck.

Hier steht [^a-zA-Z0-9] für jedes Zeichen, das nicht zwischen a bis z, A bis Z und 0 bis 9 liegt. Daher gibt die Methode test() true zurück, wenn die Zeichenfolge nicht alphanumerisch ist, und false für alphanumerische Zeichenfolgen.

<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>
Nach dem Login kopieren

In diesem Tutorial haben wir gelernt, wie man alphanumerische Zeichenfolgen validiert. Wir verwenden zwei verschiedene reguläre Ausdrücke, um alphanumerische Zeichenfolgen zu validieren. Außerdem haben wir eine einfache Methode mit der for-Schleife und der charCodeAT()-Methode kennengelernt, die jedoch nicht zeiteffizient ist und nicht empfohlen wird.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript überprüfen, ob die Eingabe alphanumerisch oder nicht alphanumerisch ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!