AngularJS 表单验证
AngularJS表单验证
AngularJS表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。
AngularJS验证属性
|
属性 |
描述 |
|
Novalidate |
用于禁用浏览器默认的验证 |
|
$pristine |
表单没有填写内容 |
|
$dirty |
表单有填写记录 |
|
$invalid |
字段内容是非法的 |
|
$valid |
字段内容是合法的 |
|
$error |
字段验证不合法错误信息 |
对应表单验证CSS属性
1 .ng-valid { 2 /*验证通过样式*/ 3 } 4 5 .ng-invalid { 6 /*验证不通过样式*/ 7 } 8 9 .ng-pristine { 10 /*没修改过的样式*/ 11 } 12 13 .ng-dirty { 14 /*修改过的样式*/ 15 } 16 17 .ng-invalid-required { 18 /*必填项验证不通过样式*/ 19 } 20 21 .ng-invalid-minlength { 22 /*最小长度验证不通过样式*/ 23 } 24 25 .ng-invalid-maxlength { 26 /*最大长度验证不通过样式*/ 27 } 28
表单验证示例
1 <html> 2 <head> 3 <title>AngularJS表单验证</title> 4 <meta charset="utf-8" /> 5 <script src="js/jquery-3.1.0.min.js"></script> 6 <script src="js/angular.min.js"></script> 7 <script src="js/bootstrap.min.js"></script> 8 <link href="css/bootstrap.min.css" rel="stylesheet" /> 9 <style> 10 .ng-valid { 11 /*验证通过样式*/ 12 } 13 14 .ng-invalid { 15 /*验证不通过样式*/ 16 } 17 18 .ng-pristine { 19 /*没修改过的样式*/ 20 } 21 22 .ng-dirty { 23 /*修改过的样式*/ 24 } 25 26 .ng-invalid-required { 27 /*必填项验证不通过样式*/ 28 } 29 30 .ng-invalid-minlength { 31 /*最小长度验证不通过样式*/ 32 } 33 34 .ng-invalid-maxlength { 35 /*最大长度验证不通过样式*/ 36 } 37 </style> 38 </head> 39 <body ng-app="myApp" ng-controller="myCtrl"> 40 <!--表单验证--> 41 <div class="col-md-6"> 42 <form role="form" class="form-horizontal" name="myForm" novalidate> 43 <div class="form-group"> 44 <div class="col-md-4"> 45 <label for="name">1.必填项；姓名</label> 46 </div> 47 <div class="col-md-8"> 48 <input class="form-control" id="name" name="name" type="text" ng-model="user.name" required /> 49 </div> 50 </div> 51 52 <div class="form-group"> 53 <div class="col-md-4"> 54 <label for="minlength">2.最小长度5</label> 55 </div> 56 <div class="col-md-8"> 57 <input class="form-control" id="minlength" name="minlength" type="text" ng-model="user.minlength" required ng-minlength="5" /> 58 59 </div> 60 </div> 61 62 <div class="form-group"> 63 <div class="col-md-4"> 64 <label for="maxlength">3.最大长度10</label> 65 </div> 66 <div class="col-md-8"> 67 <input class="form-control" id="maxlength" name="maxlength" type="text" required ng-maxlength="10" ng-model="user.maxlength" /> 68 </div> 69 </div> 70 71 <div class="form-group"> 72 <div class="col-md-4"> 73 <label for="pattern">4.正则匹配</label> 74 </div> 75 <div class="col-md-8"> 76 <input class="form-control" id="pattern" name="pattern" type="text" ng-pattern="/[a-z][0-9]*/" required ng-model="user.pattern" /> 77 </div> 78 </div> 79 80 <div class="form-group"> 81 <div class="col-md-4"> 82 <label for="email">5.电子邮件</label> 83 </div> 84 <div class="col-md-8"> 85 <input class="form-control" id="email" name="email" type="email" required ng-model="user.email" /> 86 </div> 87 </div> 88 89 <div class="form-group"> 90 <div class="col-md-4"> 91 <label for="num">6.数字</label> 92 </div> 93 <div class="col-md-8"> 94 <input class="form-control" id="num" name="num" type="number" required ng-model="user.num" /> 95 </div> 96 </div> 97 98 <div class="form-group"> 99 <div class="col-md-4"> 100 <label for="url">7.URL</label> 101 </div> 102 <div class="col-md-8"> 103 <input class="form-control" id="url" name="url" type="url" required ng-model="user.url" /> 104 </div> 105 </div> 106 <div class="col-md-12"> 107 <input class="btn btn-primary btn-lg" type="submit" 108 ng-disabled="myForm.$invalid" value="提交" /> 109 </div> 110 <div class="col-md-12"> 111 1.必填项 <span>{{user.name}}</span><br /> 112 $pristine【没有修改】:{{myForm.name.$pristine}}<br /> 113 $dirty【修改过】：{{myForm.name.$dirty}} <br /> 114 $invalid【验证失败】:{{myForm.name.$invalid}}<br /> 115 $valid:【验证成功】：{{myForm.name.$valid}}<br /> 116 $required【必填选项】:{{myForm.name.$error.required}}<br /><br /> 117 118 2.最小长度<span>{{user.minlength}}</span><br /> 119 $pristine【没修改】:{{myForm.minlength.$pristine}}<br /> 120 $dirty【修改过】:{{myForm.minlength.$dirty}}<br /> 121 $invalid【验证失败】:{{myForm.minlength.$invalid}}<br /> 122 $valid【验证成功】:{{myForm.minlength.$valid}}<br /> 123 $error【错误详情】：{{myForm.minlength.$error}}<br /><br /> 124 125 126 3.最大长度<span>{{user.maxlength}}</span><br /> 127 $pristine【没修改】:{{myForm.maxlength.$pristine}}<br /> 128 $dirty【修改过】:{{myForm.maxlength.$dirty}}<br /> 129 $invalid【验证失败】:{{myForm.maxlength.$invalid}}<br /> 130 $valid【验证成功】:{{myForm.maxlength.$valid}}<br /> 131 $error【错误详情】：{{myForm.maxlength.$error}}<br /><br /> 132 133 134 4.正则匹配<span>{{user.pattern}}</span><br /> 135 $pristine【没修改】:{{myForm.pattern.$pristine}}<br /> 136 $dirty【修改过】:{{myForm.pattern.$dirty}}<br /> 137 $invalid【验证失败】:{{myForm.pattern.$invalid}}<br /> 138 $valid【验证成功】:{{myForm.pattern.$valid}}<br /> 139 $error【错误详情】：{{myForm.pattern.$error}}<br /><br /> 140 141 5.邮箱<span>{{user.email}}</span><br /> 142 $pristine【没修改】:{{myForm.email.$pristine}}<br /> 143 $dirty【修改过】:{{myForm.email.$dirty}}<br /> 144 $invalid【验证失败】:{{myForm.email.$invalid}}<br /> 145 $valid【验证成功】:{{myForm.email.$valid}}<br /> 146 $error【错误详情】：{{myForm.email.$error}}<br /><br /> 147 148 6.数字<span>{{user.num}}</span><br /> 149 $pristine【没修改】:{{myForm.num.$pristine}}<br /> 150 $dirty【修改过】:{{myForm.num.$dirty}}<br /> 151 $invalid【验证失败】:{{myForm.num.$invalid}}<br /> 152 $valid【验证成功】:{{myForm.num.$valid}}<br /> 153 $error【错误详情】：{{myForm.num.$error}}<br /><br /> 154 155 7.URL<span>{{user.url}}</span><br /> 156 $pristine【没修改】:{{myForm.url.$pristine}}<br /> 157 $dirty【修改过】:{{myForm.url.$dirty}}<br /> 158 $invalid【验证失败】:{{myForm.url.$invalid}}<br /> 159 $valid【验证成功】:{{myForm.url.$valid}}<br /> 160 $error【错误详情】：{{myForm.url.$error}}<br /> 161 </div> 162 </form> 163 </div> 164 <script> 165 var app = angular.module("myApp", []); 166 app.controller("myCtrl", function ($scope) { 167 $scope.name = "张三"; 168 }); 169 </script> 170 </body> 171 </html>
