项目作者: kelp404

项目描述 :
AngularJS form validation.
高级语言: CoffeeScript
项目地址: git://github.com/kelp404/angular-validator.git
创建时间: 2013-11-01T09:49:37Z
项目社区:https://github.com/kelp404/angular-validator

开源协议:MIT License

下载


angular-validator Build Status devDependency Status

MIT License

This is an AngularJS form validation written in CoffeeScript and thinking in AngularJS not jQuery.

Installation

bower

  1. $ bower install https://github.com/kelp404/angular-validator.git\#0.2.9 -S

Frameworks

  1. jQuery 3.3.1

  2. AngularJS 1.5.11

  3. Bootstrap 3

    If your error is string in rules you should include bootstrap3.css and use form-group to the input div.

$validator

  1. angular.module 'yourApp', ['validator']

register

  1. # .config
  2. $validatorProvider.register = (name, object={}) ->
  3. ###
  4. Register the rule.
  5. @params name: The rule name.
  6. @params object:
  7. invoke: 'watch' or 'blur' or undefined(validate by yourself)
  8. init: function(scope, element, attrs, $injector)
  9. validator: RegExp() or function(value, scope, element, attrs, $injector)
  10. error: string or function(value, scope, element, attrs, $injector)
  11. success: function(value, scope, element, attrs, $injector)
  12. ###
  13. # .run
  14. $validator.register = (name, object={}) ->

validate

  1. $validate.validate = (scope, model) =>
  2. ###
  3. Validate the model.
  4. @param scope: The scope.
  5. @param model: The model name of the scope or validator-group.
  6. @return:
  7. @promise success(): The success function.
  8. @promise error(): The error function.
  9. ###

reset

  1. $validate.reset = (scope, model) =>
  2. ###
  3. Reset validated error messages of the model.
  4. @param scope: The scope.
  5. @param model: The model name of the scope or validator-group.
  6. ###

validator.directive

  1. a = angular.module 'validator.directive', ['validator.provider']
  2. validator = ($injector) ->
  3. restrict: 'A'
  4. require: 'ngModel'
  5. link: (scope, element, attrs) ->
  6. ###
  7. The link of `validator`.
  8. You could use `validator=[rule, rule]` or `validator=/^regex$/`.
  9. ###
  10. validator.$inject = ['$injector']
  11. a.directive 'validator', validator

validator=”[rule, rule]”, [required], [validator-required=”true/false”], [validator-group=”group”]

  1. <div class="form-group">
  2. <label for="required0" class="col-md-2 control-label">Required</label>
  3. <div class="col-md-10">
  4. <input type="text" ng-model="formWatch.required" validator="[required]"
  5. class="form-control" id="required0" placeholder="Required"/>
  6. </div>
  7. </div>

validator=”/^regex$/“, [validator-error=”msg”], [validator-invoke=”watch”], [required], [validator-required=”true/false”], [validator-group=”group”]

  1. <div class="form-group">
  2. <label for="regexp0" class="col-md-2 control-label">RegExp [a-z]</label>
  3. <div class="col-md-10">
  4. <input type="text" ng-model="formWatch.regexp" validator="/[a-z]/"
  5. validator-invoke="watch" validator-error="it should be /[a-z]/"
  6. class="form-control" id="regexp0" placeholder="RegExp [a-z]"/>
  7. </div>
  8. </div>

[required], [validator-required=”true/false”]

If the element has this attribute, $validator will add the rule required into rules of the element.

validator.rules

  1. angular.module 'yourApp', ['validator.rules']

There are default rules in this module.

  • required
  • number
  • email
  • url

Example

  1. <!-- Bootstrap3 (not required) -->
  2. <link type="text/css" rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
  3. <!-- jQuery -->
  4. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  5. <!-- AngularJS -->
  6. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
  7. <!-- $validator -->
  8. <script type="text/javascript" src="dist/angular-validator.js"></script>
  9. <!-- basic rules (not required) -->
  10. <script type="text/javascript" src="dist/angular-validator-rules.js"></script>
  1. <!-- submit -->
  2. <div class="panel panel-default">
  3. <div class="panel-heading">
  4. <h3 class="panel-title">submit</h3>
  5. </div>
  6. <form class="form-horizontal panel-body">
  7. <div class="form-group">
  8. <label for="required2" class="col-md-2 control-label">Required</label>
  9. <div class="col-md-10">
  10. <input type="text" ng-model="formSubmit.required" validator="[requiredSubmit]" class="form-control" id="required2" placeholder="Required"/>
  11. </div>
  12. </div>
  13. <div class="form-group">
  14. <label for="regexp2" class="col-md-2 control-label">RegExp [a-z]</label>
  15. <div class="col-md-10">
  16. <input type="text" ng-model="formSubmit.regexp" validator="/[a-z]/" validator-error="it should be /[a-z]/" class="form-control" id="regexp2" placeholder="RegExp [a-z]"/>
  17. </div>
  18. </div>
  19. <div class="form-group">
  20. <label for="http2" class="col-md-2 control-label">$http</label>
  21. <div class="col-md-10">
  22. <input type="text" ng-model="formSubmit.http" validator="[backendSubmit]" class="form-control" id="http2" placeholder="do not use 'Kelp' or 'x'"/>
  23. </div>
  24. </div>
  25. <div class="form-group">
  26. <div class="col-md-offset-2 col-md-10">
  27. <input type="submit" ng-click="submit()" class="btn btn-default"/>
  28. </div>
  29. </div>
  30. </form>
  31. <div class="panel-footer">{{formSubmit}}</div>
  32. </div>
  1. a = angular.module 'app', ['validator', 'validator.rules']
  2. a.config ($validatorProvider) ->
  3. $validatorProvider.register 'backendSubmit',
  4. validator: (value, scope, element, attrs, $injector) ->
  5. $http = $injector.get '$http'
  6. h = $http.get 'example/data.json'
  7. h.then (data) ->
  8. if data and data.status < 400 and data.data
  9. return no if value in (x.name for x in data.data)
  10. return yes
  11. else
  12. return no
  13. error: "do not use 'Kelp' or 'x'"
  14. # submit - required
  15. $validatorProvider.register 'requiredSubmit',
  16. validator: RegExp "^.+$"
  17. error: 'This field is required.'
  1. # CoffeeScript
  2. # the form model
  3. $scope.formSubmit =
  4. required: ''
  5. regexp: ''
  6. http: ''
  7. # the submit function
  8. $scope.submit = ->
  9. v = $validator.validate $scope, 'formSubmit'
  10. v.success ->
  11. # validated success
  12. console.log 'success'
  13. v.error ->
  14. # validated error
  15. console.log 'error'
  1. // JavaScript
  2. // the form model
  3. $scope.formSubmit = {
  4. required: '',
  5. regexp: '',
  6. http: ''
  7. };
  8. // the submit function
  9. $scope.submit = function () {
  10. $validator.validate($scope, 'formSubmit')
  11. .success(function () {
  12. // validated success
  13. console.log('success');
  14. })
  15. .error(function () {
  16. // validated error
  17. console.log('error');
  18. });
  19. };

Unit Test

  1. $ grunt test

Development

  1. # install node modules
  2. $ npm install
  3. # install bower components
  4. $ bower install
  1. # run the local server and the file watcher to compile CoffeeScript
  2. $ grunt dev
  3. # compile coffee script and minify
  4. $ grunt build