Wie verwendet Javascript reguläre Ausdrücke, um ein Formular zu validieren? (Codebeispiel)

In diesem Artikel erfahren Sie, wie JavaScript reguläre Ausdrücke zur Validierung von Formularen verwendet (Codebeispiele). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Im vorherigen Artikel [Wie führe ich eine einfache Passwortüberprüfung im Formular in js durch? ] In diesem Artikel stellen wir anhand von Beispielen eine umfassendere Methode zur Formularvalidierung vor. Sie überprüft alles, was wir überprüfen möchten, verwendet jedoch viel Code, um jede Anforderung einzeln zu testen und verschiedene Fehlermeldungen anzuzeigen.

Wie kann man mit wenig Code Effekte erzielen? Ich glaube, dass viele Menschen solche Fragen haben werden. Tatsächlich ist es auch einfach, dieses Problem zu lösen, indem Sie reguläre Ausdrücke verwenden.

Werfen wir einen Blick auf die Methode der Überprüfung von Formularen durch reguläre Javascript-Ausdrücke durch Passwortüberprüfung des Formulars.

HTML-Code:

<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>

Die checkForm()-Funktion von js überprüft das Passwort und ruft den regulären Ausdruck auf:

  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 regulärer Ausdruck:

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

Wirkung, Passwort eingeben (123456):

Der hier verwendete Ausdruckstyp heißt „look -ahead“, das versucht, den enthaltenen regulären Ausdruck mit dem „zukünftigen“ Teil der Zeichenfolge abzugleichen.

Übersetzen (durch den obigen regulären Ausdruck implementierte Funktion):

1. Übereinstimmung mit einer Zeichenfolge aus sechs oder mehr Zeichen

2 die Abkürzung von [0-9]);

Mindestens ein Kleinbuchstabe

Mindestens ein Großbuchstabe

Testen Sie es:

Wenn Sie Ihr Passwort nur auf Buchstaben und Zahlen (keine Leerzeichen oder andere Zeichen) beschränken möchten, müssen Sie es nur geringfügig ändern. Mit dem Platzhalter w können wir Folgendes vervollständigen:

Verbesserter regulärer Ausdruck:

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

Das W ist die Abkürzung für „jeder Buchstabe, jede Zahl oder jeder Unterstrich“.

Es ist eigentlich keine gute Vorgehensweise, die verwendeten Zeichen einzuschränken, da Satzzeichen und andere Symbole zusätzliche Sicherheit bieten.

Beispiel für ein Formular zur Validierung regulärer Ausdrücke:

HTML-Code:

<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-Code:

  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;
  }

Fertig!

Rendering:

Zusammenfassung: Wie Sie sehen, lohnt es sich, reguläre Ausdrücke zu lernen. Sie können nicht nur in JavaScript, sondern auch in PHP, Perl, Java und vielen anderen Sprachen verwendet werden. Einige Texteditoren (nicht nur vi) erlauben sie auch beim Suchen oder Ersetzen von Text.

Das obige ist der detaillierte Inhalt vonWie verwendet Javascript reguläre Ausdrücke, um ein Formular zu validieren? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!