angularjs api文档_AngularJS form表单验证（非常全面)

【www.bbyears.com--Action】

构建一个ng表单

1.确保form上标签有一个name属性，像下面的例子一样。最好再加一个novalidate=”novalidate”

2.form中不能有action属性。提交交由ng-submit处理

3.每个input一定要有ng-model，最好有一个name方便引用。然后用require或者ng-minlength之类才起作用

  Your email
 

ng默认提供了验证

验证是否已输入文字，只需在标签上加上required：

验证至少输入{number}个字符，使用指令ng-minlength=“{number}”：

验证至多输入{number}个字符，使用指令ng-maxlength=“{number}”：

确保输入匹配一个正则表达式，使用指令ng-pattern="/PATTERN/":

验证输入是一个Email，设置input的type属性为email：

验证输入是一个数字，设置input的type属性为number：

验证输入是一个URL，设置input的type属性为url

实战一个例子（需要验证一个email为发须并且最小为10，最长为20，并且并须要含有m字符。没有实际意义，只是演示例子）

 
 

 
 

<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
 var myApp = angular.module("myApp", []);
</script>

运行这个例子先啥都不做，查看元素

 

注意看这些标出来的东西有点意思。然后输入字符就能看到他们的进行变化。然后我来解释一下这些东西。（可以看到一开始required就为ng-invalid-required。但其他的都为valid）

验证的时候感觉好像出现一个bug.具体如下：（如有知道的请帮助一下解释一下这个问题）

   
   

   
   
   

<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
    var myApp = angular.module("myApp", []);
</script>

第一个例子的email居然ng-valid-email。感觉有点问题。难道是用了type=”email”之类就不能用ng-minlength ng-pattern之类了吗？觉得可能是ng版本问题，但换了低版本之后发现同样有问题。希望有人能解释一下这个问题。github有这个问题 https://github.com/angular/angular.js/issues/7849 而且email验证的时候github上有人提出了其他问题，https://github.com/angular/angular.js/issues/5899，看来对于type=”email”和 url之类要使用的时候多注意，我的建议是尽量不用。如果需要请写自定义验证。下面我会介绍，确实是有够蛋疼之处。由于这种问题，所以我写的表单不会出现type=”email” type=”url” type=”number”之类，如果ng解决了这个问题。我再进行更新。

表单的状态

   
   

   
               ng-pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"/>

 
{{ a }}
<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
    var myApp = angular.module("myApp", []);
</script>

我们把焦点只聚积到表单（class有如下属性ng-pristine ng-invalid ng-invalid-required）,如果变动在第一个输入框中输入s,现在class就变了ng-invalid ng-invalid-required ng-dirty ng-invalid-minlength

 

 

 

 

现在需要解释一些东西了

AngularJS将DOM验证的结果保存在$scope对象中。这使我们能够实时做出一些处理。提供给我们的属性有：

$pristine表示用户是否修改了表单。如果为ture，表示没有修改过：

formName.$pristine;

$dirty当且用户是否已经修改过表单：

formName.$dirty

我们来直观的看下



   
   



   

       
                       ng-pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"/>
   

    查看表单状态

<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
    var myApp = angular.module("myApp", []);
    myApp.controller("testController", function($scope){
        $scope.getFormStatus = function(){
            console.log($scope.form);
        }
    })
</script>


 

 

 

 

如果表单进行变动的时候，可以看到表单的一些属性进行了实时的变化。观察上面四个，你不难发现。$dirty和$valid是相反的，一个true，一个false或者一个false一个true,同样$valid，是得到现在是否通过验证的和$invalid也是相反的。

表单的部分说的差不多了，然后说表单中的每项的东西

 

 

 

 

可以看到每个表单项也有跟表单有些共同的属性，注意一下$error对象，记录了是哪个出现错误正确的。

实战简单实例

   
   
   



   

 
       
        填写不正确
       

 
                       ng-pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"/>
        填写格式错误
       

       
   

 

<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
    var myApp = angular.module("myApp", []);
    myApp.controller("testController", function($scope){
        $scope.save = function () {
            //获取到表单是否验证通过
            if($scope.form.$valid){
                alert("通过验证可以提交表单");
            }else{
                alert("表单没有通过验证");
            }
        }
    })
</script>

显示效果如图，当然有人有疑问了，比如第一个表单项，我不想提示填写不正确这么模糊的说法，而是告诉他是不是因为他没有填写，或者是因为他字符不够，或者是因为你超过了最大字符。这也非常好办，还记的$error吗？可以通过form.name.$error.minlength之类的得到啊。明白了不。还是不明白，好吧，再给逗逼做个代码实例

也许你稍为有些思路了。但还是很多时候力不从心，比如哥想自定义验证或者通过后台验证unique呢？再比如他这个一边输入一边就提示效果太他妈差了。我想在提交时提示或者我想在鼠标不在这个焦点的时候再提示。OK，也许你还有很多想法，但上篇已经结束了，容我整理思路，带来表单验证中篇。

本文来源：http://www.bbyears.com/flash/72250.html