AngularJS 表单验证
在使用 AngularJS 进行开发的时候,表单填写是一个很常见的需求,而表单验证又是比较让人头疼的部分,本文对此做一个总结。 在 Angular 的视图中使用的 form 已经不是 HTML 中的普通 form 了,而是一个被 Angular 封装过的指令。它可以完成普通 form 无法实现的功能,比如 form 嵌套,而且自带强大的验证功能。 Angular 在对表单进行校验的时候会使用 本文在对表单的验证时使用了 本文涉及到的源码在 这里,实现效果在 这里。 原生表单验证在 form 层面,可以使用 input 验证选项AngularJS 的 input 标签 自带的验证选项有以下这些。 <input ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""] [ng-pattern=""] [ng-change=""]> ... </input> a. 必填 <input type="text" name="myName" ng-model="username" required /> 使用 在不满足 b. 长度 <input type="text" name="myName" ng-model="username" ng-minlength="2" ng-maxlength="10" /> 在不满足 直接使用 c. 模式匹配 <input type="text" name="myDesc" ng-model="desc" ng-pattern="/^[a-zA-Z]{1,20}$/" /> 在不满足 d. 其他 AngularJS 对特定格式也进行了校验。比如将 CSS ClassesAngular 会根据表单状态自动给表单和表单项添加以下几组样式:
这些在 ngModelController 的属性中都有对应值。 根据这些 class,可以为不同状态设置不同的样式,比如这样: input.ng-valid.ng-dirty { border-color: #78FA89; } input.ng-invalid.ng-dirty { border-color: #FA787E; } 自定义验证在 AngularJS 指令入门 一文中,提到过通过 require 属性和 controller 参数,可以实现指令之间的交互。那么,在自定义指令中使用 ngModelControllerngModel 提供了数据绑定、验证、CSS更新、数据格式化和编译等操作。下面简单介绍一下 ngModelController 常用的属性和方法。 核心属性
在 <input type="text" name="username" ng-model="username" ng-model-options="{updateOn:'blur'}"> <input type="text" name="username" ng-model="username" ng-model-options="{ debounce: 500 }"> 在 核心管道
常用属性
常用方法
自定义同步验证 & 异步验证在 比如,有这样一个常见的需求,对一个必填的名称表单项,要求只能输入中英文,最小长度为2位字符,那么可以这样实现。 指令: app.directive('nameCheck',nameCheck); nameCheck.$inject = ['$http','$q']; function nameCheck($http,$q){ var NAME_REG = /^[a-zA-Zu4e00-u9fa5]+$/; return { restrict: 'A',require: 'ngModel',link:function($scope,element,attrs,ctrl){ // 同步验证 ctrl.$validators.char = function(modelValue,viewValue) { var value = modelValue || viewValue; if(!NAME_REG.test(value)){ return false; } return true; }; // 异步验证 ctrl.$asyncValidators.exist = function(modelValue,viewValue){ var value = modelValue || viewValue; var deferred = $q.defer(); $http.get('api/users/' + value).then(function(res) { if(res.data.isExist){ deferred.reject(false); } deferred.resolve(true); }) return deferred.promise; } } } } 主页面: <form name="myForm"> <div class="form-group"> <input type="text" name="username" ng-model="username" class="form-control" name-check minlength="2" required> <span ng-messages="myForm.username.$error" ng-messages-include="error.html" ng-show="myForm.username.$touched"> </span> </div> </form> 错误信息页面: <span ng-message="required">必填</span> <span ng-message="char">非法字符</span> <span ng-message="minlength">太短了</span> <span ng-message="exist">名称已存在</span> ngMessages
在以前的版本中,如果想处理错误信息的显示,可能需要定义一堆 准备工作
使用方法有两种使用方法,一是将 <form name="myForm"> <input type="text" ng-model="field" name="myField" required minlength="5" /> <div ng-messages="myForm.myField.$error"> <div ng-message="required">必填</div> <div ng-message="minlength">长度不够</div> </div> </form> 这样会按照各个错误信息书写的先后顺序进行单一显示,如果想同时显示所有的错误信息,加个 <div ng-messages="myForm.myField.$error" ng-messages-multiple></div> 另一种是将 <ng-messages for="myForm.myField.$error"> <ng-message when="required">必填</ng-message> <ng-message when="minlength">长度不够</ng-message> </ng-messages> 如果很多表单项的错误提示信息都一样,也可以把错误信息放在模版里,使用 <div ng-messages="myForm.username.$error" ng-messages-include="validateTemplate/error.html"> </div> 错误模版文件: <div ng-message="required">必填</div> <div ng-message="minlength">长度不够</div> 更详细的使用办法直接看 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |