阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      angular-validation 教程

      写在前面

      angular-validation 1.4.4

      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

      1. Required
      2. Url
      3. Email
      4. Number
      5. Min length
      6. 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 :heart:
      Thanks for all contributors

      目录
      目录