Angularjs总结（一）表单验证

常用的表单验证
1.必须字段
html5特性增加required

<input type="text" required />

2.最小长度和最大长度

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

<input type="text" ng-maxlength="20" />

3.模式匹配——正则表达式

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

4.邮件模式将type设置为email

<input type="email" name="email" ng-model="user.email" />

5.数字将type设置为number

<input type="number" name="age" ng-model="user.age" />

6.url 将type设置为url

<input type="url" name="homepage" ng-model="user.facebook_url" />

不常用（以下属性在form表单中）

1.屏蔽对表单的验证
novalidate
2.未修改过的表单 bool属性 true表示已修改过
formName.inputFieldName.$pristine;
3.已修改过的表单 bool属性
formName.inputFieldName.$dirty
4.通过表单验证 bool属性
formName.inputFieldName.$valid
5.未通过表单验证 bool属性
formName.inputFieldName.$invalid
例：

 <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>

 <div class="form-group has-feedback">

 <div class="col-md-4">

 <label for="name">1.必填项</label>

 </div>

 <div class="col-md-8">

 <input class="form-control" id="name" name="name" type="text" required ng-model='user.name' />

 <span class="glyphicon glyphicon-ok form-control-feedback"

 ng-show="myForm.name.$dirty && myForm.name.$valid"></span>

 </div>

 </div>

 </form>

$pristine 【没修改】：{{myForm.name.$pristine }}  
$dirty【修改过】：{{myForm.name.$dirty}}  
$invalid【验证失败】：{{myForm.name.$invalid}}  
$invalid【验证成功】：{{myForm.name.$valid}}  
required：{{myForm.name.$error.required}}  

ngMessages对表单进行优化
1.首先我们需引入angular.module('myApp', ['ngMessages']);
ng是通过$error来监视模型变化的，$error中会给出详细的错误信息
例子：

 <form role="form" name="myForm" class="form-horizontal" novalidate>

     <div class="form-group">

         <div class="col-md-2">

             用户名

         </div>

         <div class="col-md-10">

             <input type="text" placeholder="ng-Messages测试" name="name" ng-model="username.name"

                    ng-minlength=3 ng-maxlength=20 required />

             <hr />

             $error：{{myForm.name.$error}}

             <hr />

             <div ng-messages="myForm.name.$error">

                 <div ng-message="required">必填项</div>

                 <div ng-message="minlength">字符太短小于3</div>

                 <div ng-message="maxlength">字符太长大于20</div>

             </div>

         </div>

     </div>

 </form>

2.错误提示复用
将其作为模板，指定的路径由ng自动添加，这里需要使用到ng-messages-include命令；
首先将错误放到一静态页面error.html

 <div ng-message="required">必填项</div>

 <div ng-message="email">邮件格式不对</div>

 <div ng-message="minlength">字符太短小于3</div>

 <div ng-message="maxlength">字符太长大于20</div>

 <!--在所用到的html页面中用ng-messages-include引入相应的静态页面-->

 <div ng-messages="myForm.name.$error" ng-messages-multiple ng-messages-include="@Url.Content('~/Content/template/error.html)"></div>

巴特西

Angularjs总结（一）表单验证

最新文章

热门文章