angular-validation 使用方法

angular-validation

angular-validation是AngularJS 提供的表单验证插件，可以根据多种规则对表单进行有效性验证，并对非法数据进行警告。类似的插件还有 angular-w5c-validator、angular-validation-match

本文主要介绍angular-validation的使用方法

---

安装方法

npm install angular-validation     // Install with npmbower install angular-validation   // Install with bower

使用方法

1、设置全局验证规则

将angular-validation\dist\angular-validation-rule.js 移到项目根目录下作为全局配置，因为angular-validation自带的配置信息很难满足我们的项目需要，我们往往需要自定义一些配置。

(function() {  angular    .module('your module')    .config(['$validationProvider', function($validationProvider) {

例如我们可以在这里配置 不显示验证通过的message

//全局设置是否显示 success/error message      $validationProvider.showSuccessMessage = false; // or true(default)      $validationProvider.showErrorMessage = true; // or true(default)

$validationProvider 中主要有两个方法，setExpression（expression）——设置匹配规则，setDefaultMsg（message）——设置响应message。因此，我们可以在全局的配置文件中添加自定义的验证规则。
举个栗子：

      minlength: function(value, scope, element, attrs, param) {        ...      },      maxlength: function(value, scope, element, attrs, param) {        ...      },      //原文只提供了 minlength 和 maxlength      //我们添加length规则，匹配value的长度是否等于param      length: function(value, scope, element, attrs, param) {        return value && value.length == param;      }      ...      // defaultMsg 中设置对应的 message      length: {          error: '字段长度不符合要求',          success: '填写正确!'      }

2、在HTML中使用

angular-validation的作者考虑的非常全面，考虑到了各种场景的验证习惯，详细的指令请参阅 API https://github.com/hueitan/angular-validation/blob/master/API.md，在此只介绍几个指令使用中需要注意的地方：

validator="required,number" //validator 支持多个规则valid-method="submit-only"  //设置进行验证的方式，submit-only只在提交时验证，默认为watch方式<form name="newParamForm"> //angular-validation 检测的属性是name ,因此一定设置name <!-- 一定要设置name="describeMessage" --><textarea id="describe" name="describeMessage"          ng-model="newInventoryParamCtrl.param.describe"           class="form-control" rows="3" message-id="describeMessage" </textarea><span id="describeMessage"></span>

3、在js中使用

有些时候我们需要在controller中使用$validationProvider，使用的方法为：

.controller('index', ['$scope', '$injector', function($scope, $injector) {      // Injector      var $validationProvider = $injector.get('$validation');      //自定义验证规则（页面上只能写maxlength = "固定数值",这里可以写根据入参bitLimit设置不同的长度验证）      $validationProvider.setExpression({          length: function(value, scope, element, attrs, param) {            return value && value.length == vm.param.bitLimit;          }      });      //最后再提供一个规范的表单提交方法      $validationProvider.validate(form).success(function () {        var restPromise = serviceResource.restCallService(URL,"ADD",vm.param);        restPromise.then(function (data) {          Notification.success("新建参数成功!");          $uibModalInstance.close(data.content);        }, function (reason) {          Notification.error(reason.code.message);        });      }).error(function () {        Notification.error("表单填写有误,请核对后再提交");      });  

4、效果图

---

第一篇博客，需要你的赞美！！！