So verifizieren Sie mit JavaScript

In der Webentwicklung sind Formulare ein sehr häufiges Element. Es kann jedoch oft nicht garantiert werden, dass die vom Benutzer in das Formular eingegebenen Daten korrekt sind. Daher müssen wir einige Überprüfungen durchführen, um die Gültigkeit der Daten sicherzustellen. Als wichtiger Bestandteil der Web-Frontend-Entwicklung verfügt JavaScript über eine sehr leistungsstarke Überprüfungsfunktion. In diesem Artikel wird die Verwendung von JavaScript zur Überprüfung von Formulardaten vorgestellt.

1. Formulardaten abrufen

Um die Formulardaten zu überprüfen, müssen Sie zunächst die Eingabedaten abrufen. In JavaScript können Sie das Dokumentobjekt verwenden, um Formularelemente abzurufen, wie unten gezeigt:

let username = document.getElementById('username').value; // 获取用户名的值
let password = document.getElementById('password').value; // 获取密码的值

Unter anderem kann die Methode getElementById () das entsprechende Element basierend auf dem ID-Attribut des Elements abrufen. Nachdem wir die Werte der Formularelemente erhalten haben, können wir diese Werte überprüfen.

2. Benutzernamen überprüfen

Bei der Überprüfung des Benutzernamens können wir reguläre Ausdrücke verwenden. Das Folgende ist ein einfacher regulärer Ausdruck, der Groß- und Kleinbuchstaben, Zahlen und Unterstriche mit einer Länge von 6 bis 20 Zeichen zuordnen kann:

let usernamePattern = /^[a-zA-Z0-9_]{6,20}$/;

Dann können wir den erhaltenen Benutzernamen mit dem regulären Ausdruck abgleichen. um festzustellen, ob es die Anforderungen erfüllt:

if (!usernamePattern.test(username)) {
  // 满足条件
} else {
  // 不满足条件
}

Im obigen Code kann die test()-Methode testen, ob eine Zeichenfolge mit einem bestimmten regulären Ausdruck übereinstimmt. Wenn sie übereinstimmt, gibt sie true zurück, wenn nicht Wenn eine Übereinstimmung vorliegt, wird „false“ zurückgegeben.

3. Passwort überprüfen

Wir können bei der Überprüfung von Passwörtern auch reguläre Ausdrücke verwenden. Das Folgende ist ein einfacher regulärer Ausdruck, der Groß- und Kleinbuchstaben, Zahlen und Sonderzeichen mit einer Länge von 6 bis 20 Zeichen zuordnen kann:

let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,20}$/;

Dann können wir das erhaltene Passwort mit dem regulären Ausdruck abgleichen , um festzustellen, ob es die Anforderungen erfüllt:

if (!passwordPattern.test(password)) {
  // 满足条件
} else {
  // 不满足条件
}

In ähnlicher Weise kann die test()-Methode im obigen Code testen, ob eine Zeichenfolge mit einem bestimmten regulären Ausdruck übereinstimmt. Wenn sie übereinstimmt, gibt sie true zurück, wenn Wenn es nicht übereinstimmt, wird false zurückgegeben.

4. E-Mail-Adresse überprüfen

E-Mail-Adresse ist ein sehr häufiges Formularelement, daher ist es auch sehr wichtig, die E-Mail-Adresse zu überprüfen. Ebenso können wir reguläre Ausdrücke zur Überprüfung verwenden. Das Folgende ist ein einfacher regulärer Ausdruck, der mit legalen E-Mail-Adressen übereinstimmen kann:

let emailPattern = /^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([.][a-zA-Z0-9]+)+$/;

Anschließend können wir die erhaltene E-Mail-Adresse mit dem regulären Ausdruck abgleichen, um festzustellen, ob sie die Anforderungen erfüllt:

if (!emailPattern.test(email)) {
  // 满足条件
} else {
  // 不满足条件
}

let phonePattern = /^1[34578]d{9}$/;

if (!phonePattern.test(phone)) {
  // 满足条件
} else {
  // 不满足条件
}

let usernamePattern = /^[a-zA-Z0-9_]{6,20}$/; // 校验用户名
let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,20}$/; // 校验密码
let emailPattern = /^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([.][a-zA-Z0-9]+)+$/; // 校验邮箱地址
let phonePattern = /^1[34578]d{9}$/; // 校验手机号码

function validateForm() { // 表单校验函数
  let username = document.getElementById('username').value; // 获取用户名
  let password = document.getElementById('password').value; // 获取密码
  let email = document.getElementById('email').value; // 获取邮箱地址
  let phone = document.getElementById('phone').value; // 获取手机号码

  if (!usernamePattern.test(username)) { // 校验用户名
    alert('请填写6到20位大小写字母、数字和下划线');
    return false;
  } else if (!passwordPattern.test(password)) { // 校验密码
    alert('请填写6到20位大小写字母、数字、特殊字符');
    return false;
  } else if (!emailPattern.test(email)) { // 校验邮箱地址
    alert('请填写正确的邮箱地址');
    return false;
  } else if (!phonePattern.test(phone)) { // 校验手机号码
    alert('请填写正确的手机号码');
    return false;
  } else {
    return true;
  }
}

Das obige ist der detaillierte Inhalt vonSo verifizieren Sie mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!