当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

angular-validation

授权协议 Readme

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者谷翰飞

操作系统跨平台

开源组织无

适用人群未知

软件概览

angular-validation 1.4.5

Client-side Validation should be simple and clean.
Don't let Client-side Validation dirty your controller.

Setup your Validation on config phase by using some rules (example)
If you prefer schema over html attributes , try angular-validation-schema (Demo)
And add Validation in your view only.

angularjs 1.2.x support to version angular-validation 1.2.x
angularjs 1.3.x support after version angular-validation 1.3.x
angularjs 1.4.x support after version angular-validation 1.4.x

Requirement

AngularJS 1.2.x (for angular-validation 1.2.x)
AngularJS 1.3.x (for angular-validation 1.3.x)
AngularJS 1.4.x (for angular-validation 1.4.x)

DEMO

http://hueitan.github.io/angular-validation/

Install

Install with npm

npm install angular-validation

or with bower

bower install angular-validation

Using angular-validation

<script src="dist/angular-validation.js"></script>
<script src="dist/angular-validation-rule.js"></script>

angular.module('yourApp', ['validation']);

// OR including your validation rule
angular.module('yourApp', ['validation', 'validation.rule']);

Writing your First Code

<form name="Form">
    <div class="row">
        <div>
            <label>Required</label>
            <input type="text" name="required" ng-model="form.required" validator="required">
        </div>
        <div>
            <label>Url</label>
            <input type="text" name="url" ng-model="form.url" validator="required, url">
        </div>
        <button validation-submit="Form" ng-click="next()">Submit</button>
        <button validation-reset="Form">Reset</button>
    </div>
</form>

Documentation API

Built-in validation in angular-validation-rule

Required
Url
Email
Number
Min length
Max length

5 and 6 require you to pass an inline parameter to set the length limit. Eg, maxlength=6.

Anyone can give a PR for this angular-validation for more built-in validation

Integrating with Twitter Bootstrap

To integrate this package with Bootstrap you should do the following.

Add the following LESS to your project

.ng-invalid.ng-dirty{
    .has-error .form-control;
}

label.has-error.control-label {
    .has-error .control-label;
}

Change the Error HTML to something like:

$validationProvider.setErrorHTML(function (msg) {
       return  "<label class=\"control-label has-error\">" + msg + "</label>";
});

You can add the bootstrap class .has-success in a similar fashion.

To toggle .has-error class on bootstrap .form-group wrapper for labels and controls, add:

angular.extend($validationProvider, {
    validCallback: function (element){
        $(element).parents('.form-group:first').removeClass('has-error');
    },
    invalidCallback: function (element) {
        $(element).parents('.form-group:first').addClass('has-error');
    }
});

License

MIT

CHANGELOG

See release

CONTRIBUTORS

Thank you for your contribution @lvarayut and @Nazanin1369 ❤️
Thanks for all contributors

使用案例

angular validation 使用总结

我由于制作登陆界面，用到了angular-validation，结合ng-cookies，实现记住账户密码的功能。文档是https://github.com/hueitan/angular-validation/blob/master/API.md 该文档挺详细的介绍了angular-validation的使用方式。我因为英文不好，理解的不是很仔细。但是总结了以下的使用经验。 1 首先在模块中注入
angular-validation校验数字

<input type="number" min="0" max="100" maxlength="5" class="number" ng-model="formData.age" validator="number,required,range" ng-class="{'has-error':orderForm.age.$invalid}" ng-blur="showError(true)"
Angular Validation – Forms Validation with AngularJS (转)

Angular Validation – Forms Validation with AngularJS 31st March 2015 232 Angular-js Plugins , Form Elements Forms Validation with Angular made easy! Angular-Validation is an angular directive/se
ng2-validation/angular2表单验证模块使用方法（赞、实用）

原文出处：https://blog.csdn.net/piaodangdeyouzi/article/details/77477688 延伸阅读：angular2表单验证之ng2-validation学习 (模板驱动表单和模型驱动表单分别说明, 比较详尽) 案例 https://segmentfault.com/a/1190000008631742 （模板驱动表单和模型驱动表单混
angular2 ng2-validation 表单验证

1：安装模块 npm install ng2-validation --save 2：配置app.module.ts import { FormsModule, <font color="Red">ReactiveFormsModule</font> } from '@angular/forms'; import {<font color="Red">CustomFormsModule</font