为了账号安全,请及时绑定邮箱和手机立即绑定

信息输入验证成功后,表单下方为什么会出现空白部分,如何去掉?

源代码:

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <link rel="stylesheet" href="./libs/bootstrap.min.css">

   <link rel="stylesheet" href="./libs/font-awesome.min.css">

   <style>

       .wrapper{

           width: 240px;

           margin: 20px auto;

       }

       .error{

           color: #a30;

       }

       p.success{

           color: #5bc648;

       }

       .input-check{

           position: relative;

           top: -30px;

           left: 215px;

       }

       input.error{

           border: 1px solid #a30;

       }

   </style>

   <title>Document</title>

</head>

<body ng-app="myApp" ng-controller="SignUpController">

   <div class="wrapper">

       <h2>新用户注册</h2>

       <form name="signUpForm" ng-submit="submitForm()" action="">

           <div class="form-group" ng-class="{ 'success': signUpForm.username.$valid">

               <label for="">用户名:</label>

               <input type="text"

                      name="username"

                      class="form-control"

                      ng-model="userdata.username"

                      ng-minlength="4"

                      ng-maxlength="32"

                      required><!--用户名必须存在-->

               <p class="fa fa-check input-check success" ng-if="signUpForm.username.$valid"></p>

               <p class="error" ng-if="signUpForm.username.$error.required && signUpForm.username.$touched">用户名不能为空!</p>

               <p class="error" ng-if="(signUpForm.username.$error.minlength ||

                  signUpForm.username.$error.maxlength) && signUpForm.username.$touched">用户名的长度应在4-32位之间!</p>

           </div>

           <div class="form-group" ng-class="{'success': signUpForm.password.$valid}">

               <label for="">密码:</label>

               <input type="password"

                      name="password"

                      class="form-control"

                      ng-model="userdata.password"

                      ng-minlength="8"

                      ng-maxlength="32"

                      required>

               <p class="fa fa-check input-check success" ng-if="signUpForm.password.$valid"></p>

               <p class="error" ng-if="signUpForm.password.$error.required && signUpForm.password.$touched">密码不能为空!</p>

               <p class="error" ng-if="(signUpForm.password.$error.minlength ||

                  signUpForm.password.$error.maxlength) && signUpForm.password.$touched">密码长度应在8-32之间</p>

           </div>

           <div class="form-group">

               <label for="">确认密码:</label>

               <input type="password"

                      name="password2"

                      class="form-control"

                      ng-model="userdata.password2"

                      compare="userdata.password"

                      required>

               <p class="fa fa-check input-check success" ng-if="signUpForm.password2.$valid"></p>

               <p class="error" ng-if="signUpForm.password2.$error.compare && signUpForm.password2.$touched">两次密码输入不一致!</p>

           </div>

           <div class="form-group">

               <button class="btn btn-primary">提交</button>

           </div>

       </form>

   </div>

   


   <script src="./libs/angular.min.js"></script>

   <script src="./js/main.js"></script>

</body>

</html>


https://img1.sycdn.imooc.com//5bad0a610001f1f503790441.jpg


正在回答

1 回答


【蜘蛛侠TG@abin789】-10600
【蜘蛛侠TG@abin789】-10601
【蜘蛛侠TG@abin789】-10602
【蜘蛛侠TG@abin789】-10603
【蜘蛛侠TG@abin789】-10604
【蜘蛛侠TG@abin789】-10605
【蜘蛛侠TG@abin789】-10606
【蜘蛛侠TG@abin789】-10607
【蜘蛛侠TG@abin789】-10608
【蜘蛛侠TG@abin789】-10609
【蜘蛛侠TG@abin789】-10610
【蜘蛛侠TG@abin789】-10611
【蜘蛛侠TG@abin789】-10612
【蜘蛛侠TG@abin789】-10613
【蜘蛛侠TG@abin789】-10614
【蜘蛛侠TG@abin789】-10615
【蜘蛛侠TG@abin789】-10616
【蜘蛛侠TG@abin789】-10617
【蜘蛛侠TG@abin789】-10618
【蜘蛛侠TG@abin789】-10619
【蜘蛛侠TG@abin789】-10620
【蜘蛛侠TG@abin789】-10621
【蜘蛛侠TG@abin789】-10622
【蜘蛛侠TG@abin789】-10623
【蜘蛛侠TG@abin789】-10624
【蜘蛛侠TG@abin789】-10625
【蜘蛛侠TG@abin789】-10626
【蜘蛛侠TG@abin789】-10627
【蜘蛛侠TG@abin789】-10628
【蜘蛛侠TG@abin789】-10629
【蜘蛛侠TG@abin789】-10630
【蜘蛛侠TG@abin789】-10631
【蜘蛛侠TG@abin789】-10632
【蜘蛛侠TG@abin789】-10633
【蜘蛛侠TG@abin789】-10634
【蜘蛛侠TG@abin789】-10635
【蜘蛛侠TG@abin789】-10636
【蜘蛛侠TG@abin789】-10637
【蜘蛛侠TG@abin789】-10638
【蜘蛛侠TG@abin789】-10639
【蜘蛛侠TG@abin789】-10640
【蜘蛛侠TG@abin789】-10641
【蜘蛛侠TG@abin789】-10642
【蜘蛛侠TG@abin789】-10643
【蜘蛛侠TG@abin789】-10644
【蜘蛛侠TG@abin789】-10645
【蜘蛛侠TG@abin789】-10646
【蜘蛛侠TG@abin789】-10647
【蜘蛛侠TG@abin789】-10648
【蜘蛛侠TG@abin789】-10649
【蜘蛛侠TG@abin789】-10650
【蜘蛛侠TG@abin789】-10651
【蜘蛛侠TG@abin789】-10652
【蜘蛛侠TG@abin789】-10653
【蜘蛛侠TG@abin789】-10654
【蜘蛛侠TG@abin789】-10655
【蜘蛛侠TG@abin789】-10656
【蜘蛛侠TG@abin789】-10657
【蜘蛛侠TG@abin789】-10658
【蜘蛛侠TG@abin789】-10659
【蜘蛛侠TG@abin789】-10660
【蜘蛛侠TG@abin789】-10661
【蜘蛛侠TG@abin789】-10662
【蜘蛛侠TG@abin789】-10663
【蜘蛛侠TG@abin789】-10664
【蜘蛛侠TG@abin789】-10665
【蜘蛛侠TG@abin789】-10666
【蜘蛛侠TG@abin789】-10667
【蜘蛛侠TG@abin789】-10668
【蜘蛛侠TG@abin789】-10669
【蜘蛛侠TG@abin789】-10670
【蜘蛛侠TG@abin789】-10671
【蜘蛛侠TG@abin789】-10672
【蜘蛛侠TG@abin789】-10673
【蜘蛛侠TG@abin789】-10674
【蜘蛛侠TG@abin789】-10675
【蜘蛛侠TG@abin789】-10676
【蜘蛛侠TG@abin789】-10677
【蜘蛛侠TG@abin789】-10678
【蜘蛛侠TG@abin789】-10679
【蜘蛛侠TG@abin789】-10680
【蜘蛛侠TG@abin789】-10681
【蜘蛛侠TG@abin789】-10682
【蜘蛛侠TG@abin789】-10683
【蜘蛛侠TG@abin789】-10684
【蜘蛛侠TG@abin789】-10685
【蜘蛛侠TG@abin789】-10686
【蜘蛛侠TG@abin789】-10687
【蜘蛛侠TG@abin789】-10688
【蜘蛛侠TG@abin789】-10689
【蜘蛛侠TG@abin789】-10690
【蜘蛛侠TG@abin789】-10691
【蜘蛛侠TG@abin789】-10692
【蜘蛛侠TG@abin789】-10693
【蜘蛛侠TG@abin789】-10694
【蜘蛛侠TG@abin789】-10695
【蜘蛛侠TG@abin789】-10696
【蜘蛛侠TG@abin789】-10697
【蜘蛛侠TG@abin789】-10698
【蜘蛛侠TG@abin789】-10699
【蜘蛛侠TG@abin789】-10700
【蜘蛛侠TG@abin789】-10701
【蜘蛛侠TG@abin789】-10702
【蜘蛛侠TG@abin789】-10703
【蜘蛛侠TG@abin789】-10704
【蜘蛛侠TG@abin789】-10705
【蜘蛛侠TG@abin789】-10706
【蜘蛛侠TG@abin789】-10707
【蜘蛛侠TG@abin789】-10708
【蜘蛛侠TG@abin789】-10709
【蜘蛛侠TG@abin789】-10710
【蜘蛛侠TG@abin789】-10711
【蜘蛛侠TG@abin789】-10712
【蜘蛛侠TG@abin789】-10713
【蜘蛛侠TG@abin789】-10714
【蜘蛛侠TG@abin789】-10715
【蜘蛛侠TG@abin789】-10716
【蜘蛛侠TG@abin789】-10717
【蜘蛛侠TG@abin789】-10718
【蜘蛛侠TG@abin789】-10719
【蜘蛛侠TG@abin789】-10720
【蜘蛛侠TG@abin789】-10721
【蜘蛛侠TG@abin789】-10722
【蜘蛛侠TG@abin789】-10723
【蜘蛛侠TG@abin789】-10724
【蜘蛛侠TG@abin789】-10725
【蜘蛛侠TG@abin789】-10726
【蜘蛛侠TG@abin789】-10727
【蜘蛛侠TG@abin789】-10728
【蜘蛛侠TG@abin789】-10729
【蜘蛛侠TG@abin789】-10730
【蜘蛛侠TG@abin789】-10731
【蜘蛛侠TG@abin789】-10732
【蜘蛛侠TG@abin789】-10733
【蜘蛛侠TG@abin789】-10734
【蜘蛛侠TG@abin789】-10735
【蜘蛛侠TG@abin789】-10736
【蜘蛛侠TG@abin789】-10737
【蜘蛛侠TG@abin789】-10738
【蜘蛛侠TG@abin789】-10739
【蜘蛛侠TG@abin789】-10740
【蜘蛛侠TG@abin789】-10741
【蜘蛛侠TG@abin789】-10742
【蜘蛛侠TG@abin789】-10743
【蜘蛛侠TG@abin789】-10744
【蜘蛛侠TG@abin789】-10745
【蜘蛛侠TG@abin789】-10746
【蜘蛛侠TG@abin789】-10747
【蜘蛛侠TG@abin789】-10748
【蜘蛛侠TG@abin789】-10749
【蜘蛛侠TG@abin789】-10750
【蜘蛛侠TG@abin789】-10751
【蜘蛛侠TG@abin789】-10752
【蜘蛛侠TG@abin789】-10753
【蜘蛛侠TG@abin789】-10754
【蜘蛛侠TG@abin789】-10755
【蜘蛛侠TG@abin789】-10756
【蜘蛛侠TG@abin789】-10757
【蜘蛛侠TG@abin789】-10758
【蜘蛛侠TG@abin789】-10759
【蜘蛛侠TG@abin789】-10760
【蜘蛛侠TG@abin789】-10761
【蜘蛛侠TG@abin789】-10762
【蜘蛛侠TG@abin789】-10763
【蜘蛛侠TG@abin789】-10764
【蜘蛛侠TG@abin789】-10765
【蜘蛛侠TG@abin789】-10766
【蜘蛛侠TG@abin789】-10767
【蜘蛛侠TG@abin789】-10768
【蜘蛛侠TG@abin789】-10769
【蜘蛛侠TG@abin789】-10770
【蜘蛛侠TG@abin789】-10771
【蜘蛛侠TG@abin789】-10772
【蜘蛛侠TG@abin789】-10773
【蜘蛛侠TG@abin789】-10774
【蜘蛛侠TG@abin789】-10775
【蜘蛛侠TG@abin789】-10776
【蜘蛛侠TG@abin789】-10777
【蜘蛛侠TG@abin789】-10778
【蜘蛛侠TG@abin789】-10779
【蜘蛛侠TG@abin789】-10780
【蜘蛛侠TG@abin789】-10781
【蜘蛛侠TG@abin789】-10782
【蜘蛛侠TG@abin789】-10783
【蜘蛛侠TG@abin789】-10784
【蜘蛛侠TG@abin789】-10785
【蜘蛛侠TG@abin789】-10786
【蜘蛛侠TG@abin789】-10787
【蜘蛛侠TG@abin789】-10788
【蜘蛛侠TG@abin789】-10789
【蜘蛛侠TG@abin789】-10790
【蜘蛛侠TG@abin789】-10791
【蜘蛛侠TG@abin789】-10792
【蜘蛛侠TG@abin789】-10793
【蜘蛛侠TG@abin789】-10794
【蜘蛛侠TG@abin789】-10795
【蜘蛛侠TG@abin789】-10796
【蜘蛛侠TG@abin789】-10797
【蜘蛛侠TG@abin789】-10798
【蜘蛛侠TG@abin789】-10799

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
AngularJS表单验证
  • 参与学习       39428    人
  • 解答问题       130    个

一看就明白的AngularJS表单验证

进入课程

信息输入验证成功后,表单下方为什么会出现空白部分,如何去掉?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信