mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
82 lines
2.9 KiB
Text
82 lines
2.9 KiB
Text
@workInProgress
|
|
@ngdoc overview
|
|
@name Developer Guide: Validators: Creating Angular Validators
|
|
@description
|
|
|
|
|
|
To create a custom validator, you simply add your validator code as a method onto the
|
|
`angular.validator` object and provide input(s) for the validator function. Each input provided is
|
|
treated as an argument to the validator function. Any additional inputs should be separated by
|
|
commas.
|
|
|
|
The following bit of pseudo-code shows how to set up a custom validator:
|
|
|
|
<pre>
|
|
angular.validator('your_validator', function(input [,additional params]) {
|
|
[your validation code];
|
|
if ( [validation succeeds] ) {
|
|
return false;
|
|
} else {
|
|
return true; // No error message specified
|
|
}
|
|
}
|
|
</pre>
|
|
|
|
Note that this validator returns "true" when the user's input is incorrect, as in "Yes, it's true,
|
|
there was a problem with that input". If you prefer to provide more information when a validator
|
|
detects a problem with input, you can specify an error message in the validator that angular will
|
|
display when the user hovers over the input widget.
|
|
|
|
To specify an error message, replace "`return true;`" with an error string, for example:
|
|
|
|
return "Must be a value between 1 and 5!";
|
|
|
|
Following is a sample UPS Tracking Number validator:
|
|
|
|
<doc:example>
|
|
<doc:source>
|
|
<script>
|
|
angular.validator('upsTrackingNo', function(input, format) {
|
|
var regexp = new RegExp("^" + format.replace(/9/g, '\\d') + "$");
|
|
return input.match(regexp)?"":"The format must match " + format;
|
|
});
|
|
</script>
|
|
<input type="text" name="trackNo" size="40"
|
|
ng:validate="upsTrackingNo:'1Z 999 999 99 9999 999 9'"
|
|
value="1Z 123 456 78 9012 345 6"/>
|
|
</doc:source>
|
|
<doc:scenario>
|
|
it('should validate correct UPS tracking number', function() {
|
|
expect(element('input[name=trackNo]').attr('class')).
|
|
not().toMatch(/ng-validation-error/);
|
|
});
|
|
|
|
it('should not validate in correct UPS tracking number', function() {
|
|
input('trackNo').enter('foo');
|
|
expect(element('input[name=trackNo]').attr('class')).
|
|
toMatch(/ng-validation-error/);
|
|
});
|
|
</doc:scenario>
|
|
</doc:example>
|
|
|
|
In this sample validator, we specify a regular expression against which to test the user's input.
|
|
Note that when the user's input matches `regexp`, the function returns "false" (""); otherwise it
|
|
returns the specified error message ("true").
|
|
|
|
Note: you can also access the current angular scope and DOM element objects in your validator
|
|
functions as follows:
|
|
|
|
* `this` === The current angular scope.
|
|
* `this.$element` === The DOM element that contains the binding. This allows the filter to
|
|
manipulate the DOM in addition to transforming the input.
|
|
|
|
|
|
## Related Topics
|
|
|
|
* {@link dev_guide.templates Angular Templates}
|
|
* {@link dev_guide.templates.filters Angular Filters}
|
|
* {@link dev_guide.templates.formatters Angular Formatters}
|
|
|
|
## Related API
|
|
|
|
* {@link api/angular.validator API Validator Reference}
|