Comment vérifier à l'aide de JavaScript

Dans le développement Web, les formulaires sont un élément très courant. Cependant, l'exactitude des données saisies par l'utilisateur dans le formulaire n'est souvent pas garantie, nous devons donc effectuer certaines vérifications pour garantir la validité des données. En tant qu'élément important du développement frontal Web, JavaScript dispose d'une fonction de vérification très puissante. Cet article explique comment utiliser JavaScript pour vérifier les données d'un formulaire.

1. Obtenir les données du formulaire

Pour vérifier les données du formulaire, vous devez d'abord obtenir les données d'entrée. En JavaScript, vous pouvez utiliser l'objet document pour obtenir des éléments de formulaire, comme indiqué ci-dessous :

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

Parmi eux, la méthode getElementById() peut obtenir l'élément correspondant en fonction de l'attribut id de l'élément. Après avoir obtenu les valeurs des éléments du formulaire, on peut alors vérifier ces valeurs.

2. Vérifier le nom d'utilisateur

Lors de la vérification du nom d'utilisateur, nous pouvons utiliser des expressions régulières. Ce qui suit est une expression régulière simple qui peut faire correspondre des lettres majuscules et minuscules, des chiffres et des traits de soulignement, d'une longueur de 6 à 20 caractères :

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

Nous pouvons ensuite faire correspondre le nom d'utilisateur obtenu avec l'expression régulière pour déterminer s'il répond aux exigences :

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

Dans le code ci-dessus, la méthode test() peut tester si une chaîne correspond à une certaine expression régulière si elle correspond, elle renvoie vrai, si elle ne correspond pas, elle renvoie faux.

3. Vérifier le mot de passe

Lors de la vérification des mots de passe, nous pouvons également utiliser des expressions régulières. Ce qui suit est une expression régulière simple qui peut faire correspondre des lettres majuscules et minuscules, des chiffres et des caractères spéciaux, d'une longueur de 6 à 20 caractères :

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

Nous pouvons ensuite faire correspondre le mot de passe obtenu avec l'expression régulière pour déterminer s'il répond aux exigences. :

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

De même, dans le code ci-dessus, la méthode test() peut tester si une chaîne correspond à une certaine expression régulière si elle correspond, elle renvoie vrai, si elle ne correspond pas, elle renvoie faux.

4. Vérifier l'adresse e-mail

L'adresse e-mail est un élément de formulaire très courant, il est donc également très nécessaire de vérifier l'adresse e-mail. De même, nous pouvons utiliser des expressions régulières pour la vérification. Ce qui suit est une expression régulière simple qui peut correspondre aux adresses e-mail légales :

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

Ensuite, nous pouvons faire correspondre l'adresse e-mail obtenue avec l'expression régulière pour déterminer si elle répond aux exigences :

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

De même, dans le code ci-dessus, le test( ) peut tester si une chaîne correspond à une expression régulière. Si elle correspond, elle renvoie vrai, si elle ne correspond pas, elle renvoie faux.

5. Vérifier le numéro de téléphone mobile

Lors de la vérification des numéros de téléphone mobile, nous pouvons également utiliser des expressions régulières. Ce qui suit est une expression régulière simple qui peut correspondre aux numéros de téléphone mobile légaux :

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

Ensuite, nous pouvons faire correspondre le numéro de téléphone mobile obtenu avec l'expression régulière pour déterminer s'il répond aux exigences :

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

De même, dans le code ci-dessus, testez La méthode () peut tester si une chaîne correspond à une certaine expression régulière si elle correspond, elle renvoie vrai, si elle ne correspond pas, elle renvoie faux.

6. Implémenter la fonction de vérification

En intégrant les règles de vérification ci-dessus, nous pouvons implémenter une fonction complète de vérification de formulaire. Voici un exemple de code simple :

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

Dans le code ci-dessus, la fonction validateForm() sera automatiquement appelée lorsque le formulaire est soumis pour vérifier les données du formulaire. Si la vérification échoue, la fonction retournera false pour empêcher la soumission du formulaire ; si la vérification réussit, la fonction retournera true et le formulaire sera soumis. Dans le même temps, lorsque la vérification échoue, le message d'invite correspondant apparaîtra pour permettre aux utilisateurs d'apporter des corrections.

7. Résumé

En tant que langage de développement web front-end très important, JavaScript fournit une fonction de vérification très puissante. Dans le développement de formulaires, l'utilisation de JavaScript pour la vérification des données peut grandement garantir la validité et l'exactitude des données, et améliorer l'expérience utilisateur et la sécurité des données. Ce qui précède présente certaines règles de vérification et implémentations de code couramment utilisées, qui peuvent être utilisées à titre de référence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!