如果你想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加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 }
把这段代码加入到上面的例子,就能看到效果了.