表单验证

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>