密码验证在 Angular 中不起作用答案

【问题标题】：Password validation not working in Angular密码验证在 Angular 中不起作用
【发布时间】：2016-10-05 06:04:24
【问题描述】：

您好，我正在尝试使用 ng-show 验证密码，即使密码正确也会显示错误消息，并且还会在页面刷新时显示。

我的代码是：表单名称是：registeruser

<!-- Set a password for the account -->
                        <div class="col-md-12" style="margin: 7px;">
                            <input type="password" id="password" name="password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" required autocomplete="off" />
                            <!-- Button for viewing password -->
                            <input type="checkbox" id="eye" onclick="if(password.type=='text')password.type='password'; else password.type='text';" />
                        </div>
                        <!-- Error Message for password -->
                        <div class="error-message" ng-show="registeruser.password.$invalid">
                            Please enter at least 6 characters.
                        </div>
                        <div class="error-message" ng-show="registeruser.password.$pristine">
                            Please enter your password.
                        </div>

我用占位符名称、ID 和型号名称检查了 ng-show，但它不起作用。此外，如果用户在未输入密码的情况下从密码字段中跳出，并且在密码字段为空时不在页面加载时，我希望显示密码错误。

【问题讨论】：

使用 ng-messages 进行表单验证。这是实现验证的简单且更好的方法，并且会为您进行大量 OOB 检查。下面的链接解释了yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html

标签： angularjs html

【解决方案1】：

试试这样的。这里“formSubmitted”是单击提交按钮时设置的范围变量。您可以在控制器中设置它，例如 $scope.formSubmitted = true;在函数内部并使用提交按钮的 ng-click 调用它。注意：使用 ng-minlength 检查最少 6 个字符的要求。

<div class="col-md-12" style="margin: 7px;">
        <input type="password" id="password" name="password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="password" ng-minlength="6" required autocomplete="off" />
     </div>

    <!-- Error Message for password -->
    <div class="error-message" ng-show="(registeruser.password.$error.minlength && !registeruser.password.$pristine) ||  (registeruser.password.$pristine && formSubmitted)">
           Please enter at least 6 characters.
    </div>
    <div class="error-message" ng-show="(registeruser.password.$error.required && !registeruser.password.$pristine) || (registeruser.password.$pristine && formSubmitted)">
           Please enter your password.
    </div>

【讨论】：

【解决方案2】：

使用$dirty 和$invalid 来显示错误消息。 $dirty 由 angular 设置，以确定用户是否在输入上放置任何内容。如果您希望仅在输入获得和失去焦点而没有任何文本时才显示错误消息，您应该使用ng-blur/ng-focus 来管理输入的进入/退出。默认情况下，仅当用户通过 $dirty 在输入中插入文本时才进行角度管理，但如果用户在不输入文本的情况下输入和退出输入，则检测不到任何更改。

$dirty 的使用：

<input type="password" id="password" name="password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" required autocomplete="off" ng-minlength="6" />
<!-- Error Message for password -->
                    <div class="error-message" ng-show="registeruser.password.$invalid && registeruser.password.$dirty">
                        Please enter at least 6 characters.
                    </div>

【讨论】：