angular-validation

2018-07-13 admin

angular-validation是什么

什么是angular-validation,Client-side Validation for AngularJS

angular-validation介绍、angular-validation使用

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


```source-js
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<g-emoji class=“g-emoji” alias=“heart” fallback-src=“https://assets-cdn.github.com/images/icons/emoji/unicode/2764.png”>❤️

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35892.html

文章标题:angular-validation

回到顶部