Utilisez les fonctions JavaScript pour remplir et valider automatiquement les formulaires

Implémentation de la fonction JavaScript pour le remplissage et la validation automatiques des formulaires

Dans le développement Web, les formulaires sont un élément très courant, et nous avons souvent besoin de remplir et de valider des formulaires. L'utilisation des fonctions JavaScript permet de réaliser facilement les fonctions de remplissage et de vérification automatiques du formulaire, améliorant ainsi l'expérience utilisateur et la précision des données. Dans cet article, je présenterai comment utiliser les fonctions JavaScript pour implémenter le remplissage et la validation automatiques des formulaires, et je fournirai des exemples de code spécifiques.

1. Formulaire de remplissage automatique

Le formulaire de remplissage automatique peut réduire la saisie manuelle fastidieuse et améliorer l'efficacité lorsque les utilisateurs remplissent le formulaire. Habituellement, nous pouvons stocker à l'avance les informations de l'utilisateur, telles que son nom, son adresse e-mail, son numéro de téléphone, etc., puis remplir automatiquement ces informations dans le formulaire correspondant lorsque l'utilisateur visite la page Web.

L'exemple de code est le suivant :

// 假设用户信息存储在一个对象中
var userInfo = {
  name: "张三",
  email: "zhangsan@example.com",
  phone: "123456789"
};

// 自动填充表单
function autoFillForm() {
  document.getElementById("name").value = userInfo.name;
  document.getElementById("email").value = userInfo.email;
  document.getElementById("phone").value = userInfo.phone;
}

// 在页面加载完成后调用自动填充函数
window.onload = function() {
  autoFillForm();
};

Dans le code ci-dessus, nous définissons d'abord un objet userInfo pour stocker les informations utilisateur, qui contiennent les valeurs​​de nom, d'e-mail et de numéro de téléphone. Ensuite, grâce à la fonction autoFillForm qui remplit automatiquement le formulaire, nous pouvons attribuer ces valeurs à l'attribut value de l'élément de formulaire correspondant pour obtenir l'effet de remplissage automatique. Enfin, appelez simplement la fonction autoFillForm une fois la page chargée.

2. Vérification du formulaire

La vérification du formulaire consiste à garantir que les informations renseignées par les utilisateurs sont conformes à certaines règles ou formats afin d'éviter les soumissions malveillantes ou les erreurs de données. La vérification de formulaire courante comprend : la vérification des champs obligatoires, la vérification du format de l'e-mail, la vérification du format du numéro de téléphone mobile, etc.

L'exemple de code est le suivant :

// 表单验证
function formValidation() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var phone = document.getElementById("phone").value;

  // 验证姓名是否为空
  if (name === "") {
    alert("请输入姓名！");
    return false;
  }

  // 验证邮箱格式
  var emailPattern = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
  if (!emailPattern.test(email)) {
    alert("请输入有效的邮箱地址！");
    return false;
  }

  // 验证手机号格式
  var phonePattern = /^1[3456789]d{9}$/;
  if (!phonePattern.test(phone)) {
    alert("请输入有效的手机号码！");
    return false;
  }

  // 验证通过，可提交表单
  alert("提交成功！");
  return true;
}

Dans le code ci-dessus, nous obtenons la valeur de chaque zone de saisie dans le formulaire et appliquons des expressions régulières pour la vérification correspondante. Si la vérification échoue, un message d'invite apparaît et renvoie false, empêchant la soumission du formulaire ; si la vérification réussit, un message d'invite indiquant une soumission réussie apparaît et renvoie true, permettant la soumission du formulaire.

Pour utiliser la fonction de validation du formulaire, vous pouvez ajouter un événement onclick sur le bouton de soumission du formulaire, comme suit :

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" required>

  <label for="phone">电话：</label>
  <input type="tel" id="phone" required>

  <input type="submit" value="提交" onclick="return formValidation()">
</form>

Dans le code ci-dessus, nous avons appelé la fonction formValidation dans l'événement onclick du bouton de soumission et utilisé le mot-clé return à recevoir La valeur de retour de la fonction. Si true est renvoyé, la soumission du formulaire est autorisée ; si false est renvoyé, la soumission du formulaire est empêchée.

Résumé :

En utilisant les fonctions JavaScript pour implémenter le remplissage et la validation automatiques des formulaires, nous pouvons rendre le remplissage des formulaires plus pratique et plus précis pour les utilisateurs. Le code ci-dessus fournit une implémentation spécifique du remplissage et de la validation automatiques des formulaires, qui peut être modifiée et étendue en fonction des besoins réels. J'espère que cet article vous aidera !

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!