角度密码的表单验证

时间:2015-11-22 11:22:21

标签: angularjs validation

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

这是我的代码:

<!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>

1 个答案:

答案 0 :(得分:0)

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

如果我理解你的问题。我有一个问题,浏览器自动填充保存的用户名和&amp;密码到您的字段。如果可以尝试将autocomplete="off"放在输入字段上。但是如果你使用的是镀铬它就没用了。由于chrome没有选项可以停止自动填写用户名和密码。这个问题还有一个解决方法。你可以把虚拟用户名和&amp;您形成的密码字段并默认隐藏它们。

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