AngularJs的表单验证

如果你想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记.

1 <form name="form" novalidate>
2             <label name="email">Your Email</label>
3             <input type="email" name="email" ng-model="email" placeholder="Email Address" />
4         </form>

上面的代码,你可以删去或添加上novalidate,输入错误的email,会有不同的提示.

一.表单指令.

1.必填项:required.

2.最小长度:ng-minlength='{number}'

1 <input type="text" ng-minlength=5 />

2.最小长度:ng-maxlength='{number}'

1 <input type="text" ng-maxlength=5 />

4.模式匹配:ng-pattern="/正则表达式/"

1 <input type="text" ng-pattern='[a-zA-Z]' />

二:表单中的变量(formName.inputFiledName.property)

未修改的表单:未修改,值为true.否则为false.　　　　formName.inputFiledName.$pristine

修改过的表单:只要修改过了,不管验证是否通过,就是true. 　　formName.inputFiledName.$dirty

合法的表单:判断表单内容是否合法,合法就是true.　　.formName.inputFiledName.$valid

不合法表单:如果不合法,值为true　　.formName.inputFiledName.$invalid

错误对象.包含当前表单的所有验证内容,以及他们是否合法的信息.　　.formName.inputFiledName.$error

 1 <!DOCTYPE html>
 2 <html ng-app="formModel">
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
 7         <script type="text/javascript" src="js/angular-1.2.16.js" ></script>
 8     </head>
 9     <body ng-controller="formCtrl">
10         <form name="myForm" style="margin: 100px;" ng-submit="submitForm(myForm.$valid)">
11             必填项,eamail
12             <input name="personEmail" required="required" type="email" ng-model="person.email" placeholder="必填项,eamail" />
13             <br /><br />必填项,最小3个字符
14             <input name="personName" required ng-model="person.name" ng-minlength=3 placeholder="必填项,最小3个字符" />
15 <br />
16               <input type="submit" ng-disabled="myForm.$invalid" value="提交"/>
17         </form>
18   <span>myForm.personEmail.$valid:{{myForm.personEmail.$valid}}</span><br />
19 <span>myForm.personEmail.$error.required:{{myForm.personEmail.$error.required}}</span><br />
20 <span>myForm.personEmail.$error.email:{{myForm.personEmail.$error.email}}</span><br />
21 <span>myForm.personEmail.$pristine:{{myForm.personEmail.$pristine}}</span><br />
22 <span>myForm.personEmail.$error:{{myForm.personEmail.$error}}</span>
23     </body>
24     <script type="text/javascript">
25         var myModule=angular.module("formModel",[]);
26         myModule.controller("formCtrl",function($scope){
27             $scope.person={
28                 name:"",
29                 email:""
30             };
31             $scope.submitForm=function(vailid){
32                 alert(vailid);
33             }
34         })
35         
36     </script>
37 </html>

三:css样式:

AngularJs处理表单时,会根据表单当前的状态添加一些css类.

.ng-pristine{} 未修改的样式.

.ng-dirty{} 修改过后的样式

.ng-valid{} 验证合法时

.ng-invalid{} 验证不合法时.

 1 .personName.ng-pristine{
 2     border: 1px solid blue;
 3 }
 4 .personName.ng-dirty{
 5     border: 1px solid yellow;
 6 }
 7 .personName.ng-invalid{
 8     border: 1px solid red;
 9 }
10 .personName.ng-valid{
11     border: 1px solid green;
12 }

把这段代码加入到上面的例子,就能看到效果了.