Question

我有一个表单，其中我使用Bootstrap添加了两个文本字段。现在我尝试为这两个字段添加AngularJs验证但不能这样做。这是我对userId文本字段的标记。

    <form role="form" name="Loginform" action="" method="post" class="registration-form">
    <div class="form-group">
    <label class="sr-only" for="UserID">User ID</label>
    <input type="text" name="UserID" ng-model="user" placeholder="User ID..." class="form-first-name form-control" id="UserID" required>
    <span style="color:red" ng-show="Loginform.user.$dirty && myForm.user.$invalid">
    <span ng-show="Loginform.user.$error.required">Username is required.</span>
    </span>
    </div>
    </form>

请帮我解决这个问题..谢谢..

Answer 1

如果要验证一个或多个输入字段，最好的方法是创建一个控制器并调用它。

function Ctrl($scope) {
  $scope.isInvalid = function(field){
    return $scope.myForm[field].$invalid && $scope.myForm[field].$dirty;
  };
  $scope.isValid = function(field){
    return $scope.myForm[field].$valid && $scope.myForm[field].$dirty;
  };
}

<!DOCTYPE html>
<html ng-app>
  <head lang="en">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  
  <body ng-controller="Ctrl">
    <form name="myForm" novalidate class="form-horizontal">
      <div class="control-group" ng-class="{error: isInvalid('name')}">
        <label>Name:</label>
        <input type="text" name="name" placeholder="Name" ng-model="user.name" required/>
        <span ng-show="!isValid('name')">Name is required</span>
      </div>
      
    </form>
  </body>
  
</html>

希望它适合你：）

Answer 2

您能否看到我更新了代码并进行了一些更正 http://jsfiddle.net/v7je78gq/

<span style="color:red" ng-show="Loginform.$dirty && Loginform.$invalid">
<span ng-show="Loginform.$error.required">Username is required.</span>
</span>

这是因为你在检查表格中不存在的财产希望这会对你有所帮助

Answer 3

输入字段的名称是UserID而非用户。

ng-show="Loginform.UserID.$error.required"

Answer 4

您输入的名称与验证元素未正确对应

<form role="form" name="Loginform" action="" method="post" class="registration-form">
                        <div class="form-group">
                        <label class="sr-only" for="UserID">User ID</label>
                        <input type="text" name="UserID" ng-model="user" placeholder="User ID..." class="form-first-name form-control" id="UserID" required>
                        <span style="color:red" ng-show="Loginform.UserID.$touched && Loginform.UserID.$invalid">
                        <span ng-show="Loginform.UserID.$error.required">Username is required.</span>
                        </span>
                        </div>
                    </form>

AngularJS中的验证无效

4 个答案: