Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Schritte zur Validierung des AngularJS-Registrierungsformulars

Detaillierte Erläuterung der Schritte zur Validierung des AngularJS-Registrierungsformulars

php中世界最好的语言Original: 2018-04-17 14:12:501466Durchsuche

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zur AngularJS-Registrierung Formularüberprüfung und der Vorsichtsmaßnahmen für die AngularJS-Registrierungsformularüberprüfung geben. Hier ist ein praktischer Fall. Werfen wir einen Blick darauf.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Validierung des AngularJS-Registrierungsformulars. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php 表单验证

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Fügen Sie die Funktion „Zurück zum Anfang“ mit requireJS hinzuNächster Artikel：Fügen Sie die Funktion „Zurück zum Anfang“ mit requireJS hinzu

In Verbindung stehende Artikel

Mehr sehen