Question

我需要使用Angular.js验证我的密码字段的模式和最大长度，但在我的情况下，它不能按预期工作。我在下面解释我的代码。

<form id="signupform" class="form-horizontal" role="form" name="signupform">
                    <div class="form-group">
                        <label for="email" class=" control-label col-sm-3">New password</label>
                        <div class="col-sm-9">
                            <div ng-class="{ 'myError': signupform.password.$touched && signupform.password.$invalid }">
                                <input type="password" class="form-control" name="password" placeholder="create your new password" ng-model="first_pass" ng-maxlength="20" ng-pattern="/^[a-zA-Z0-9]+$/">
                            </div>
                        </div>
                    </div>
                    <div class="help-block" ng-messages="signupform.password.$error" ng-if="signupform.password.$touched">
                        <p ng-message="maxlength" style="color:#F00;">This field is too long.The maximum length of your password should be 20.</p>
                         <p ng-message="pattern" style="color:#F00;">This field needs the format like at least one number,one letter.</p>
                    </div>
                    <div class="form-group">
                        <label for="email" class=" control-label col-sm-3">Confirm password</label>
                        <div class="col-sm-9">
                                <div ng-class="{ 'myError': signupform.password_confirmation.$touched && signupform.password_confirmation.$invalid }">
                                    <input type="password" class="form-control" name="password_confirmation" placeholder="confirm your new password" ng-model="second_pass" ng-maxlength="8" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/">
                                </div>
                        </div>
                    </div>
                    <div class="help-block" ng-messages="signupform.password_confirmation.$error" ng-if="signupform.password_confirmation.$touched">
                        <p ng-message="maxlength" style="color:#F00;">This field is too long.The maximum length of your password should be 20.</p>
                         <p ng-message="pattern" style="color:#F00;">This field needs the format like at least one number,one letter.</p>
                    </div>
                    <div class="form-group">
                        <!-- Button -->                                 
                        <div class="  col-sm-offset-3 col-sm-9">
                            <button id="btn-signup" type="button" class="btn btn-success" ng-click="resetPass(signupform);">Submit</button>
                        </div>
                    </div>                             
                </form>

在这里，我需要密码字段取at least one number and one character，最大长度应为20.在我的情况下，两种错误消息都会出现。

Answer 1

您可以将以下两条不同条件的消息分开：

`<p  ng-message="maxlength" style="color:#F00;">This field is too long.The 
  maximum length of your password should be 20.</p>

<p ng-message="pattern" style="color:#F00;">This field needs the format like at least one number,one letter.</p>

角度验证无法正常工作

1 个答案: