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 }
把这段代码加入到上面的例子,就能看到效果了.
