Acheck 角度版本 - Javascript

简介

Acheck 是一个基于 AngularJS 的表单验证框架。它提供了丰富的验证方式，简化了表单验证的复杂度，为开发者提供了更加便利的开发体验。

特点

• 易于使用：简洁明了的 API，快速上手；
• 强大的验证方式：支持多种验证方式，覆盖了绝大部分场景；
• 可定制化：支持自定义错误提示信息和样式；
• 方便扩展：支持自定义验证规则。

安装

使用 npm 安装：

npm install acheck-angular --save

或者在 HTML 中引入：

<script src="path/to/acheck-angular.js"></script>

使用方法

在 AngularJS 应用程序中，需要先将 Acheck 模块注入：

angular.module('myApp', ['acheck']);

在 HTML 中可以这样使用：

<form name="myForm" ng-submit="submit()">
  <input type="text" name="name" ng-model="user.name" required>
  <span ng-show="myForm.name.$error.required">请输入姓名</span>
  <input type="email" name="email" ng-model="user.email" email>
  <span ng-show="myForm.email.$error.email">请输入正确的邮箱地址</span>
  <input type="password" name="password" ng-model="user.password" minlength="6" maxlength="16">
  <span ng-show="myForm.password.$error.minlength">密码长度不能少于 6 位</span>
  <button type="submit">提交</button>
</form>

在代码中，可以通过配置选项来设置错误提示信息和样式：

angular.module('myApp', ['acheck'])
  .config(function(acheckProvider) {
    acheckProvider.setErrorMessages({
      required: '该项不能为空',
      email: '请输入正确的邮箱地址'
    });
    acheckProvider.setClasses({
      error: 'has-error'
    });
  });

还可以自定义验证规则：

angular.module('myApp', ['acheck'])
  .run(function(acheck) {
    acheck.addRule('even', function(value) {
      return parseInt(value) % 2 === 0;
    }, '请输入偶数');
  });

API

• acheckProvider.setErrorMessages(messages)：设置错误提示信息；
• acheckProvider.setClasses(classes)：设置样式；
• acheck.addRule(name, validateFn, errorMessage)：添加验证规则，name 为规则名称，validateFn 为验证函数，返回 true 或 false，errorMessage 为错误提示信息。

详细的 API 文档请参考官方文档。

结语

Acheck 可以让表单验证变得更加轻松简单，如果你在 AngularJS 项目中需要表单验证，不妨试试 Acheck！