Question

我正在查看此页面上的示例：http://www.w3schools.com/angular/tryit.asp?filename=try_ng_validate

<!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 = 'john.doe@gmail.com';
}
</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>

有人可以更好地解释一下吗？

Answer 1

那是因为您的email字段属于email类型，因此它会针对email格式进行验证。并且您的用户名仅为text个字段，因此有角度的内容只会针对text输入而非email

进行验证

这是一个简单的demo

在你的情况下，电子邮件字段是必填项，应该是电子邮件，

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

所以angular会先检查它是否为空，否则会检查该值是否为email

但是文本字段只是一个文本

因此angular将仅检查文本框值的空或非空

angular.js如何验证此示例中的表单？

1 个答案: