angular-validation的使用方法

angular-validation

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

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

npm install angular-validation // Install with npm
bower 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

<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、效果图

这里写图片描述

angular-validation的使用方法

猜你喜欢