2014-10-22 6 views
0

Я смотрю на пример на этой странице: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_validateКак угловой.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> 

Может кто-то объяснить это лучше?

ответ

4

thats потому что ваш email поданный тип email поэтому он валидирует против email формат. и ваше имя пользователя просто text подано так Угловая будет проверять против просто text вход не против email

здесь простой demo

В вашем случае электронной почты поле является обязательным и должно быть электронная почта,

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

так угловая сначала проверить, является ли его пустым, если не будет проверять, что значение является email

Но в тексте поле только текст

так Угловой будет проверять только пустой или не пустое значение текстового поля

Смежные вопросы