angular validation

角验证1.4.5

客户端验证应简单清洁。
不要让客户端验证您的控制器。

通过使用某些规则（示例）在配置阶段设置验证验证
如果您更喜欢模式而不是HTML属性，请尝试Angular-validation-Schema（Demo）
并仅在视图中添加验证。

Angularjs 1.2.x支持版本角验证1.2.x
AngularJs 1.3.x支持版本Angular-validation 1.3.x
AngularJS 1.4.x支持版本Angular-validation 1.4.x

要求

AngularJs 1.2.x（对于角验证1.2.x）
AngularJs 1.3.x（对于角验证1.3.x）
AngularJS 1.4.x（对于角验证1.4.x）

演示

http://hueitan.*gi*th*ub.io/angular-validation/

安装

使用NPM安装

 npm install angular-validation

或带有鲍尔

 bower install 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\' ] ) ;

编写您的第一个代码

 < 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 >

文档API

内置验证在角度验证规则中

1. 必需的
2. URL
3. 电子邮件
4. 数字
5. 最小长度
6. 最大长度

5和6要求您传递内联参数以设置长度限制。例如， maxlength=6 。

任何人都可以为这种角度验证提供PR ，以进行更多的built-in validation

与Twitter Bootstrap集成

要将此软件包与Bootstrap集成，您应该执行以下操作。

将以下内容添加到您的项目中

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

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

将错误html更改为类似的东西：

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

您可以以类似的方式添加.has-success类。

要在Bootstrap上切换.has-error类。标签和控件的.form-group包装器，请添加：

 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\' ) ;
    }
} ) ; 

执照

麻省理工学院

ChangElog

请参阅发布

贡献者

谢谢您的贡献@lvarayut和 @nazanin1369❤️
感谢所有贡献者