角度密码的表单验证答案

【问题标题】：Form validation for password in angular角度密码的表单验证
【发布时间】：2015-11-22 11:22:20
【问题描述】：

我有一些带有用户名和密码的表格。我对用户名没有任何问题，但是当我设置密码名称属性时，我看到用户名和密码中都有占位符的奇怪视图。我试图在谷歌示例中找到验证密码的示例，但我惊讶地发现只有带有指令的自定义解决方案。是否没有像其他字段一样验证密码字段的内置解决方案？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="../css/styleAdmin.css">
</head>
<body ng-app="appLogin" ng-controller="LoginCtrl">
    <h3>Login</h3>
    <form name="frmLogin" novalidate>
        <div id="loginBox">
            <div class="lineBox">
                <span class="label">Username</span>
                <input type="text"   name="username" ng-model="user.username" ng-required="true"  ng-minlength="6" ng-maxlength="8" ng-pattern="/[0-9a-z]/i">
                <span class="error-message" ng-show="frmLogin.username.$dirty&& frmLogin.username.$error" ng-hide="frmLogin.username.$dirty&& frmLogin.username.$valid">
                    The Username is Mandatory
                </span>
            </div>
            <div class="lineBox">
                <span class="label">Password</span>
                <input type="password"  name="psd" ng-model="user.password" ng-required="true" ng-minlength="6" ng-maxlength="8" ng-pattern="/[0-9a-z]/i">
                <span class="error-message" ng-show="frmLogin.psd.$dirty&&frmLogin.psd.$error" ng-hide="frmLogin.psd.$dirty&& frmLogin.psd.$valid">
                    The password is Mandatory
                </span>
            </div>
            <div class="lineBox">
                <input type="button" value="submit" id="submit" ng-disabled="frmLogin.$invalid" ng-click="submitLogin()">
            </div>
        </div>
    </form>
    <script src="../lib/angular.js"></script>
    <script>
       var appAdmin=angular.module('appLogin',[]);
       appAdmin.controller(function($scope,loginService){
       $scope.user={};
       $scope.submitLogin=function(){
       }
      });
    </script>
</body>
</html>

【问题讨论】：

您的用户名和密码输入具有相同的最小/最大/模式值（当然仅与密码相关）
在正确定义控制器并删除对不存在的 loginService 的依赖后，它可以正常工作：plnkr.co/edit/6z9uILmWjYo2cipzBF0w?p=preview。您预计会发生什么，会发生什么？
我现在明白这是个什么问题。我使用 wamp 服务器，当我上传我的应用程序时，我在用户名和密码字段中看到 wamp 的值。为什么会这样？（感谢您的快速回答）
嗯，可能是因为您将这些凭据保存在浏览器中，或者使用浏览器扩展程序。

标签： angularjs validation

【解决方案1】：

首先，您应该从错误消息范围中删除ng-hide。由于您已经拥有具有有效表达式的ng-show，因此不需要ng-hide。

如果我正确理解了您的问题。我认为您在浏览器自动将保存的用户名和密码填充到您的字段时遇到问题。如果可以尝试将autocomplete="off" 放在您的输入字段中。但是，如果您使用的是 chrome，则它是无用的。由于 chrome 无法停止自动填写用户名和密码。仍然有解决该问题的方法。您可以将虚拟用户名和密码字段放入表单中并默认隐藏它们。

<input type="text" name="username" ng-hide="true">
<input type="text" name="password" ng-hide="true">

【讨论】：

感谢您的回答。是的。问题是因为铬。在资源管理器中它可以工作
尝试将那些虚拟输入字段放在表单的开头。 chrome的自动填充问题将由此解决
哇，它有效！什么诡计！哟说虚拟字段已由 chrome coockies 自动完成，而我的真实字段在打印时为空！很好的解决方案！