将ng-pattern与angular和bootstrap3一起使用

Question

我是Web开发的新手。 现在我的代码是这样的->

<form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
                    <div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> {{errorMessage}}</div>
                    <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username"
                            value="" placeholder="username or email" required>
                    </div>
                    <div ng-show="loginForm.username.$error.pattern">
                        <span class="jdIdError-Color">Please use Lower case charchters</span>
                    </div>
                    <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input id="login-password" type="password" class="form-control" data-ng-model="formInfo.password" name="password" required
                            placeholder="password">
                    </div>
                    <div style="margin-top:10px" class="form-group">
                        <!-- Button -->

                        <div class="col-sm-12 controls">
                            <button type="submit" class="btn btn-info login-button-position" id="loginBtn" name="loginBtn" ng-disabled="!loginForm.$valid"
                                data-ng-click="isLoading=true;submit(loginForm)">
                                    <span ng-hide="hideSpinner"
                                       class="loginContainer-spinner">
                                     <i class="fa fa-spin fa-refresh"></i>
                                   </span>
                                <span class="text-white"><strong>Login</strong></span>
                            </button>
                            <!--<a id="btn-login" href="#" class="btn btn-success" data-ng-click="isLoading=true;submit(loginForm)">Login </a>-->
                        </div>
                    </div>
                </form>

所以，当我给出错误信息时，它就是这样

在这里，我删除了div，现在当我尝试使用margin稍微增加该消息时，它就没有发生。 所以，

Answer 1

将错误div从输入组div中移出：

 <form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
  <div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> {{errorMessage}}</div>
  <div style="margin-bottom: 25px" class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username" value="" placeholder="username or email" required>
  </div>
  <div ng-show="loginForm.username.$error.pattern">
    <span class="jdIdError-Color">Please use Lower case charchters</span>
  </div>
</form>

Answer 2

从输入组类中删除错误div

 <form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate> <div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> {{errorMessage}}</div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username" value="" placeholder="username or email" required> </div> <div ng-show="loginForm.username.$error.pattern"> <span class="jdIdError-Color">Please use Lower case charchters</span> </div> 

Answer 3

Bootstrap提供“ help-block”类来验证错误。 因此，您需要将“ input-group”包装到表单组中，然后将“ help-block”添加类到您的跨度中

请看下面的例子

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> ​<div class="container"> <form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>​ <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> <input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username" value="" placeholder="username or email" required> </div> <div ng-show="loginForm.username.$error.pattern"> <span class="jdIdError-Color help-block">Please use Lower case charchters</span> </div>​ </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> <input id="login-password" type="password" class="form-control" data-ng-model="formInfo.password" name="password" required placeholder="password"> </div> <div style="margin-top:10px" class="form-group"> <!-- Button -->​ <div class="col-sm-12 controls"> <button type="submit" class="btn btn-info login-button-position" id="loginBtn" name="loginBtn" ng-disabled="!loginForm.$valid" data-ng-click="isLoading=true;submit(loginForm)"> <span ng-hide="hideSpinner" class="loginContainer-spinner"> <i class="fa fa-spin fa-refresh"></i> </span> <span class="text-white"> <strong>Login</strong> </span> </button> <!--<a id="btn-login" href="#" class="btn btn-success" data-ng-click="isLoading=true;submit(loginForm)">Login </a>--> </div> </div> </form> </div>  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> ​<div class="container"> <form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>​ <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> <input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username" value="" placeholder="username or email" required> </div> <div ng-show="loginForm.username.$error.pattern"> <span class="jdIdError-Color help-block">Please use Lower case charchters</span> </div>​ </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> <input id="login-password" type="password" class="form-control" data-ng-model="formInfo.password" name="password" required placeholder="password"> </div> <div style="margin-top:10px" class="form-group"> <!-- Button -->​ <div class="col-sm-12 controls"> <button type="submit" class="btn btn-info login-button-position" id="loginBtn" name="loginBtn" ng-disabled="!loginForm.$valid" data-ng-click="isLoading=true;submit(loginForm)"> <span ng-hide="hideSpinner" class="loginContainer-spinner"> <i class="fa fa-spin fa-refresh"></i> </span> <span class="text-white"> <strong>Login</strong> </span> </button> <!--<a id="btn-login" href="#" class="btn btn-success" data-ng-click="isLoading=true;submit(loginForm)">Login </a>--> </div> </div> </form> </div>  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> ​<div class="container"> <form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>​ <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> <input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username" value="" placeholder="username or email" required> </div> <div ng-show="loginForm.username.$error.pattern"> <span class="jdIdError-Color help-block">Please use Lower case charchters</span> </div>​ </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> <input id="login-password" type="password" class="form-control" data-ng-model="formInfo.password" name="password" required placeholder="password"> </div> <div style="margin-top:10px" class="form-group"> <!-- Button -->​ <div class="col-sm-12 controls"> <button type="submit" class="btn btn-info login-button-position" id="loginBtn" name="loginBtn" ng-disabled="!loginForm.$valid" data-ng-click="isLoading=true;submit(loginForm)"> <span ng-hide="hideSpinner" class="loginContainer-spinner"> <i class="fa fa-spin fa-refresh"></i> </span> <span class="text-white"> <strong>Login</strong> </span> </button> <!--<a id="btn-login" href="#" class="btn btn-success" data-ng-click="isLoading=true;submit(loginForm)">Login </a>--> </div> </div> </form> </div>  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> ​<div class="container"> <form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>​ <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> <input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username" value="" placeholder="username or email" required> </div> <div ng-show="loginForm.username.$error.pattern"> <span class="jdIdError-Color help-block">Please use Lower case charchters</span> </div>​ </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> <input id="login-password" type="password" class="form-control" data-ng-model="formInfo.password" name="password" required placeholder="password"> </div> <div style="margin-top:10px" class="form-group"> <!-- Button -->​ <div class="col-sm-12 controls"> <button type="submit" class="btn btn-info login-button-position" id="loginBtn" name="loginBtn" ng-disabled="!loginForm.$valid" data-ng-click="isLoading=true;submit(loginForm)"> <span ng-hide="hideSpinner" class="loginContainer-spinner"> <i class="fa fa-spin fa-refresh"></i> </span> <span class="text-white"> <strong>Login</strong> </span> </button> <!--<a id="btn-login" href="#" class="btn btn-success" data-ng-click="isLoading=true;submit(loginForm)">Login </a>--> </div> </div> </form> </div>