AngularJS 등록 표 검증 기능 실현

본 고 는 여러분 에 게 사례 를 공유 하 였 습 니 다.등록 표 검증 은 여러분 이 참고 하도록 제공 합 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
사용 할 그림 두 장:
dui.gif: dui.gif cuo.gif: cuo.gif

<!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 = "dui.gif";
          //      img   
          $("#img1").attr("src", image1);
        }else{
          //    :  “      Email  ”
          $(":input[name='check-email']").val("      Email  ");
          //          
          image1 = "cuo.gif";
          //      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 = "dui.gif";
          $("#img2").attr("src", image2);
        }else{
          $(":input[name='check-name']").val("      ");
          image2 = "cuo.gif";
          $("#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 = "dui.gif";
          $("#img3").attr("src", image3);
        }else{
          $(":input[name='check-password-one']").val("     ");
          image3 = "cuo.gif";
          $("#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 = "dui.gif";
            $("#img4").attr("src", image4);
          }else{
            $(":input[name='check-password-two']").val("     ");
            image4 = "cuo.gif";
            $("#img4").attr("src", image4);
          }
        }else{
          $(":input[name='check-password-two']").val("     ");
          image4 = "cuo.gif";
          $("#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="cuo.gif" />
        <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="cuo.gif" />
        <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="cuo.gif" />
        <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="cuo.gif" />
        <input type="text" name="check-password-two" style="border: 0px" />
      </td>
    </tr>
  </table>
  <input class="btn" type="button" value="  " />
</form>
</body>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기