angular.js如何在此示例中驗證表單？

我期待在此頁面上的例子：http://www.w3schools.com/angular/tryit.asp?filename=try_ng_validate angular.js如何在此示例中驗證表單？

<!DOCTYPE html> 
<html> 

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
</head> 

<body> 
    <h2>Validation Example</h2> 

    <form ng-app="" 
      ng-controller="validateCtrl" 
      name="myForm" 
      novalidate> 

    <p>Username:<br> 
    <input type="text" 
      name="user" 
      ng-model="user" 
      required> 
    <span style="color:red" 
      ng-show="myForm.user.$dirty && myForm.user.$invalid"> 
     <span ng-show="myForm.user.$error.required"> 
      Username is required. 
     </span> 
    </span> 
    </p> 

    <p>Email:<br> 
    <input type="email" 
      name="email" 
      ng-model="email" 
      required> 
    <span style="color:red" 
      ng-show="myForm.email.$dirty && myForm.email.$invalid"> 
     <span ng-show="myForm.email.$error.required"> 
      Email is required. 
     </span> 
     <span ng-show="myForm.email.$error.email"> 
      Invalid email address. 
     </span> 
    </span> 
    </p> 

    <p> 
    <input type="submit" 
      ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
         myForm.email.$dirty && myForm.email.$invalid"> 
    </p> 

    </form> 

<script> 
function validateCtrl($scope) { 
    $scope.user = 'John Doe'; 
    $scope.email = '[email protected]'; 
} 
</script> 

</body> 
</html>

我不明白的是，似乎沒有驗證代碼。我特別不明白爲什麼以下線工程：

<span ng-show="myForm.email.$error.email">Invalid email address.</span>

但是，如果我把一個類似線，試圖假裝的用戶名是電子郵件地址，它會忽略。即以下不檢查用戶名是電子郵件地址：

<p>Username:<br> 
<input type="text" name="user" ng-model="user" required> 
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> 
<span ng-show="myForm.user.$error.required">Username is required.</span> 
<span ng-show="myForm.user.$error.email">Invalid email address.</span> 
</span> 
</p>

有人可以更好地解釋這一點嗎？

來源

2014-10-22 Kaizer Sozay

那是因爲你的email提交的是email類型，所以它驗證了email的格式。和您的用戶名是剛剛提出這樣的角度將驗證對只是一個text輸入不反對email

這裏text是一個簡單的demo

在你的情況下，需要電子郵件領域，應該是電子郵件，

<input type="email" name="email" ng-model="email" required>

所以角會先檢查其是否爲空，如果不將檢查該值是一個email

但在文本字段只是一個文本

這樣的角度會檢查只爲空或不空的文本框的值的

來源

2014-10-22 06:23:05

angular.js如何在此示例中驗證表單？

回答

相關問題