AngularJS 表单验证

Chrome的Angular插件

Chrome浏览器有一些插件可以提高Angular开发的开发效率，我本人很喜欢的有两款，分别是Angular Scope Inspector和Angular watchers。

前者可以查看angular的$scope属性，后者可以统计每个app的所有监控（watch）的变量数。

这两个插件都可以从Chrome应用商店内下载安装，当然，你也可以搜索到很多其它的优秀的Angular插件，他们能完成的功能基本大同小异，你可以根据自己的喜好选择其它的插件。可能会因网络原因无法在线安装，修改hosts文件即可。

Angular Scope Inspector插件安装好后，按F12打开开发者工具，选择左边的dom节点，可在右边的Scope Inspector标签内看到dom元素所绑定的对象。



Angular watchers插件安装好后，可在$$Watchers中看到监控的变量个数，可用于评估一个Angular单页面应用的性能。

Angular中表单数据校验指令

Angular中比较常用的指令包括 ng-required、ng-minlength、ng-maxlength、ng-pattern等，它们的用法基本类似，可以从angular手册中查看到更多指令，它们可应用于特定类型的表单元素。

Angular会为视图中的每一个form元素创建一个数据对象，该对象存储关于表单大量可用信息。常用的关于表单状态的属性如下：

属性	值	含义
$valid	Boolean	标识你当前设定的数据校验规则是否通过
$invalid	Boolean	标识你当前设定的数据校验规则是否未通过
$pristine	Boolean	如果表单没有使用则为True
$dirty	Boolean	如果表单有使用到则为True

显然，$valid与$invalid、$pristine与$dirty的值分别是刚好相反的。

我们先构建一个表单：

<form name="formName" novalidate>
    <input type="text" name="name" ng-model="user.name" ng-pattern="/^[0-9]*$/" ng-required="true">
    <p ng-show="formName.name.$invalid" style="color:red">此处不能为空</p>
    <p ng-show="formName.name.$invalid" style="color:red">此处数据无效，只能输入数字</p>
    <button type="submit" ng-disabled="formName.$invalid" class="btn btn-primary">提交</button>
</form>

其中，使用novalidate禁用浏览器自带的数据校验功能，ng-pattern指令用于匹配正则表达式，/^[0-9]*$/限定了输入数据只能是数字。表单显示效果如下：



当输入正确数据时，错误提醒会自动消失，submit按钮也会处于可用状态：



Angular会自动为每个form元素在$scope服务中创建一个对象，其名称为form元素的name属性，比如本例中，$scope服务中创建了formName对象，formName对象中包含了$valid等属性，我们可以借助Angular Scope Inspector插件查看此对象的所有属性，如图所示：



Angular在formName对象中还为每一个表单元素创建了一个子对象，其名称为input元素的name属性，本例中的text输入框的name="name"，如上图中红色框中所示。name对象中包含了该输入框的所有可用校验信息，我们可以通过formName.name.$invalid这样的方式调用其值。值得一提的是，其中包含一个$error对象，其中包含了进一步的详细校验信息，由于我们在此例中设置了ng-model和ng-pattern两个指令，因此$error对象中可包含required和pattern两个属性，可通过formName.name.$error.required这样的方式直接获取其值。

现在基于bootstrap样式表，给出一个复杂的例子，虽然看起来复杂，但是完全基于基本的angular数据校验特性：

<form class="form-horizontal" name="loginSettingform" ng-submit="putUserSettingLogin()" novalidate>
    <div class="form-group">
        <label class="col-sm-2 control-label">  </label>
        <div class="col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="loginSetting.logout"> 启用登出时间设置
                </label>
            </div>
        </div>
    </div>
    <div class="form-group"
         ng-class="{'has-error':loginSettingform.logousecond.$invalid&&loginSettingform.logousecond.$dirty}">
        <label for="a1" class="col-sm-2 control-label">登出时间（分钟） <span class="required">*</span></label>
        <div class="col-sm-2">
            <input type="text" class="form-control input-sm" id="a1" name="logousecond"
                   ng-disabled="!loginSetting.logout"
                   ng-model="loginSetting.logousecond"
                   placeholder="登出时间（分钟）" ng-required="true"
                   ng-pattern="/^([1-9][0-9]{0,2}|1[0-3][0-9][0-9]|14[0-3][0-9]|1440)$/">
        </div>
        <div class="col-sm-8">
            <a href="javascript:;" data-toggle="tooltip" data-placement="right" title="登出时间应该是1到1440的整数">
                <span class="glyphicon glyphicon-question-sign"></span>
            </a>
            <span class="validok"
                  ng-class="{'validfail':loginSettingform.logousecond.$invalid&&loginSettingform.logousecond.$dirty}">  登出时间应该是1到1440的整数</span>
        </div>
    </div>
    <div class="form-group"
         ng-class="{'has-error':loginSettingform.lockmaxcount.$invalid&&loginSettingform.lockmaxcount.$dirty}">
        <label for="a2" class="col-sm-2 control-label">最大错误次数 <span class="required">*</span></label>
        <div class="col-sm-2">
            <input type="text" class="form-control input-sm" id="a2" name="lockmaxcount"
                   ng-model="loginSetting.lockmaxcount"
                   placeholder="最大错误次数" ng-required="true"
                   ng-pattern="/^([1-9][0-9]{0,1}|100)$/">
        </div>
        <div class="col-sm-8">
            <span class="validok"
                  ng-class="{'validfail':loginSettingform.lockmaxcount.$invalid&&loginSettingform.lockmaxcount.$dirty}">  最大错误次数应该是1到100的整数</span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-1">
            <button type="submit" ng-disabled="loginSettingform.$invalid" class="btn btn-primary btn-sm col-sm-2"> 确 定
            </button>
        </div>
    </div>
</form>

兼容性讨论

最后值得注意的是，Angular的数据校验指令，依赖于浏览器自身的数据功能，在使用时一定要进行浏览器兼容性测试。