简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée des étapes de validation du formulaire d'inscription AngularJS

php中世界最好的语言
Libérer： 2018-04-17 14:12:50
original
1412 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes d'inscription à AngularJS vérification du formulaire , et quelles sont les précautions pour la vérification du formulaire d'inscription AngularJS Voici un cas pratique, jetons un coup d'oeil. 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="jquery.1.12.4.js"></script>
  <!--jquery样式-->
  <script type="text/javascript">
    //email验证
    $(function(){
      //input标签获取焦点/失去焦点时调用方法
      $(":input[name='email']").blur(function(){
        //获取input的内容
        var email = $(this).val();
        //给定输入内容的模板（email格式模板）
        var reg = /\w+[@]{1}\w+[.]\w+/;
        //将input的内容放入到模板中，进行判断
        if(reg.test(email)){
          //格式正确：输出“用户名可用”
          $(":input[name='check-email']").val("用户名可用");
          //声明正确时调用的图片
          image1 = "";
          //将图片放入到img标签中
          $("#img1").attr("src", image1);
        }else{
          //格式错误：输出“请填写有效的Email地址”
          $(":input[name='check-email']").val("请填写有效的Email地址");
          //声明正确时调用的图片
          image1 = "";
          //将图片放入到img标签中
          $("#img1").attr("src", image1);
        }
      });
    });
    //name验证
    $(function(){
      $(":input[name='name']").blur(function(){
        var name = $(this).val();
        //判断输入内容是大于四个字符
        if(name.length > 4){
          $(":input[name='check-name']").val("输入正确");
          image2 = "";
          $("#img2").attr("src", image2);
        }else{
          $(":input[name='check-name']").val("输入信息错误");
          image2 = "";
          $("#img2").attr("src", image2);
        }
      });
    });
    //password验证-第一次
    $(function(){
      $(":input[name='password-one']").blur(function(){
        var name = $(this).val();
        //判断密码是否大于6个字符
        if(name.length > 6){
          $(":input[name='check-password-one']").val("密码可用");
          image3 = "";
          $("#img3").attr("src", image3);
        }else{
          $(":input[name='check-password-one']").val("密码不可用");
          image3 = "";
          $("#img3").attr("src", image3);
        }
      });
    });
    //password验证-第二次
    $(function(){
      $(":input[name='password-two']").blur(function(){
        var name1 = $(":input[name='password-one']").val();
        var name2 = $(this).val();
        //首先判断密码是否大于6个字符
        if(name2.length > 6){
          //然后判断两次密码是否一致
          if(name2 == name1){
            $(":input[name='check-password-two']").val("密码可用");
            image4 = "";
            $("#img4").attr("src", image4);
          }else{
            $(":input[name='check-password-two']").val("密码不可用");
            image4 = "";
            $("#img4").attr("src", image4);
          }
        }else{
          $(":input[name='check-password-two']").val("密码不可用");
          image4 = "";
          $("#img4").attr("src", image4);
        }
      });
    });
  </script>
  <!--css样式-->
  <style type="text/css">
    img{width: 15px; height: 15px}
    .left{width: 200px; text-align: right}
    .right{width: 400px}
    .bjs{background-color: limegreen}
    .btn{margin: 20px 0 0 300px}
  </style>
</head>
<body>
<h4 style="color: red">以下均为必填项</h4>
<form>
  //table表格样式：边框为1，内部填充为10，外部填充为0
  <table border="1" cellpadding="10" cellspacing="0">
    <tr>
      <td class="left">请输入您的Email地址：</td>
      <td class="right">
        <input class="bjs" name="email">
        <img id="img1" src="" />
        <input type="text" name="check-email" style="border: 0px" />
      </td>
    </tr>
    <tr>
      <td class="left">设置您在当当网的昵称：</td>
      <td class="right">
        <input class="bjs" name="name">
        <img id="img2" src="" />
        <input type="text" name="check-name" style="border: 0px" />
      </td>
    </tr>
    <tr>
      <td class="left">设置密码：</td>
      <td class="right">
        <input class="bjs" name="password-one">
        <img id="img3" src="" />
        <input type="text" name="check-password-one" style="border: 0px" />
      </td>
    </tr>
    <tr>
      <td class="left">再次输入您设置的密码：</td>
      <td class="right">
        <input class="bjs" name="password-two">
        <img id="img4" src="" />
        <input type="text" name="check-password-two" style="border: 0px" />
      </td>
    </tr>
  </table>
  <input class="btn" type="button" value="注册" />
</form>
</body>
</html>
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :



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!

Étiquettes associées：
angularjs javascript 详解
source：php.cn
Article précédent：Ajouter une fonction de retour en haut avec requireJS Article suivant：ajax et jsonp inter-domaines
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Diffusez des données depuis l'API d'OpenAI à l'aide d'AJAX, PHP et d'événements envoyés par le serveur. Comment puis-je utiliser les événements envoyés par le serveur (SSE) pour diffuser des don...
Depuis 2023-11-11 12:03:23
0
1
497
Uncaught TypeError : impossible de définir la propriété non définie (définir 'innerHTML') J'essaie de créer une page Web en utilisant php, sur un élément de classe "Continuous...
Depuis 2023-11-08 21:06:09
0
1
278
Comment obtenir la valeur RVB de la couleur nommée CSS/HTML en JavaScript J'ai créé un objet Javascript appelé [name-rgb]. Votre base : nomméeColors={AliceBlue:[240...
Depuis 2023-11-06 09:05:50
0
2
210
Pourquoi tant de scripts JavaScript ajoutent-ils des nombres aléatoires aux éléments ? collision? J'ai récemment appris JavaScript et j'ai vu de nombreux exemples d'utilisation de Math.ran...
Depuis 2023-11-04 20:00:04
0
2
296
Identifier les limitations de performances en JavaScript J'essaie de trouver le goulot d'étranglement dans mon Javascript. Fondamentalement, je dév...
Depuis 2023-10-31 20:47:17
0
1
229
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！