表单验证
1. 简介
表单验证使用Angular自带表单验证机制,配合自定义指令fm-valid
使用。
2. 使用方式
使用的过程分为两个环节:配置验证规则、展示验证信息。规则配置使用Angualr自带指令,写在表单组件上;展示信息使用自定义指令,可以写在任何地方。
2.1 验证规则配置
Angular支持4中默认方式:
ng-minlength
、ng-maxlength
、ng-required
、ng-pattern
.ng-minlength
: 最小长度限制,如:ng-minlength="2"
ng-maxlength
: 最大长度限制,如:ng-maxlength="10"
ng-required
: 必填项,如:ng-required="true"
ng-pattern
: 正则匹配,如:ng-pattern="/[0-9A-Z_-]/"
type
规则input
可以自定义type
,Angular可以识别type处理错误信息。目前支持这几类text
、email
、number
、url
,当type
不为text
时,Angular启用type
验证,同时ng-pattern
失效。
2.2 验证信息展示
验证信息展示使用自定义标签fm-valid
,其value
为对应的表单交互组件(如input),该标签会自动识别错误信息并自动展示
- value : 对应的表单交互组件(如input),其表单组件(form)需定义
name
属性 - class : 通过匹配结果,自动为表单添加class属性:valid-succeed和valid-fail,该class样式已经定义
2.3 阻止表单提交
表单下有$invalid(和$valid)属性,标记表单是否验证通过,可以在提交按钮上添加此属性来控制按钮是否可操作。如:
<button ng-disabled="myForm.$invalid" ng-click="savePerson()">保存</button>
3. 使用示例
3.1 使用步骤:
- 表单添加
name
属性,如<form name="myForm">
给对应表单组件添加验证规则和
name
属性,如<input type="number" ng-minlength="2" ng-maxlength="4" name="displayName" ng-model="person.displayName"/>
添加验证展示组件,如
<span fm-valid="myForm.displayName"></span>
- 控制表单提交,如
<button ng-disabled="myForm.$invalid" ng-click="savePerson()">保存</button>
3.2示例代码
<form class="form-horizontal" name="myForm">
<div class="form-group">
<label class="col-md-2 col-xs-12 control-label">昵称</label>
<div class="col-md-4 col-xs-12">
<input type="number" id="displayName"
ng-minlength="2" ng-maxlength="4" name="displayName" class="form-control" ng-model="person.displayName"/>
</div>
<span class="col-md-2" fm-valid="myForm.displayName"></span>
</div>
<div class="panel-footer">
<button ng-disabled="myForm.$invalid" ng-click="savePerson()">保存</button>
</div>
</form>