whitesource
Version:
whitesource node module
108 lines (104 loc) • 7.21 kB
HTML
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<title>AngularJS ui-validate</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>
<!-- ui-validate files -->
<script src="../dist/validate.js"></script>
</head>
<body class="container">
<script>
var app = angular.module('demo', ['ui.validate']);
app.controller('ValidateCtrl', function($scope, $timeout, $q) {
$scope.notBlackListed = function(value) {
var blacklist = ['bad@domain.com', 'verybad@domain.com'];
return blacklist.indexOf(value) === -1;
};
$scope.doesNotExist = function(value) {
var db = ['john.doe@mail.com', 'jane.doe@mail.com'];
// Simulates an asyncronous trip to the server.
return $q(function(resolve, reject) {
$timeout(function() {
if (db.indexOf(value) < 0) {
resolve();
} else {
reject();
}
}, 500);
});
};
});
</script>
<section id="validate" ng-controller="ValidateCtrl">
<div class="page-header">
<h1>Validate</h1>
</div>
<h3>What?</h3>
<div class="row">
<div class="col-md-6">
<p>The
<code>ui-validate</code> and <code>ui-validate-async</code> directives makes it very easy to create custom validator expressions.</p>
<div class="well">
<form name="form">
<h3>e-mail</h3>
<input class="form-control" name="email" placeholder="try john.doe@mail.com or bad@domain.com" type="email" required ng-model="email" ng-model-options="{ debounce: 100 }"
ui-validate="{blacklist: 'notBlackListed($value)'}"
ui-validate-async="{alreadyExists: 'doesNotExist($modelValue)'}">
<span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
<span ng-show='form.email.$error.alreadyExists'>This e-mail is already taken!</span>
<span ng-show='form.email.$pending'>Verifying e-mail on server...</span>
<br>is form valid: {{form.$valid}}
<br>
<br>email errors: {{form.email.$error | json}}
<br>email pending: {{form.email.$pending | json}}
<h3>password</h3>
<input class="form-control" name="password" type="text" required ng-model="password" placeholder="password">
<input class="form-control" name="confirm_password" type="text" required ng-model="confirm_password" ui-validate=" '$value==password' "
ui-validate-watch=" 'password' " placeholder="confirm password">
<span ng-show='form.confirm_password.$error.validator'>Passwords do not match!</span>
<br>is form valid: {{form.$valid}}
<br>
<br>password errors: {{form.confirm_password.$error| json}}</form>
</div>
<h3>Why?</h3>
<p>Angular.js comes with several built-in validation mechanism for input fields (ngRequired, ngPattern etc.) but using an arbitrary validation function requires creation of custom directives for interact with angular's validation mechanism.
The ui-validate directive makes it easy to use any function(s) defined in scope as a validator function(s).
A validator function will trigger validation on both model and input changes.</p>
</div>
<div class="col-md-6">
<pre class="prettyprint"><input name="email" ng-model="email"
<strong>ui-validate</strong>="{blacklist : 'notBlackListed($value)' }"> Is e-mail black-listed? {{!!form.email.$error.blacklist}}
<strong>ui-validate-async</strong>="{alreadyExists: 'doesNotExist($modelValue)' }"> Is e-mail already registered? {{!!form.email.$error.alreadyExists}}
<input name="password" required ng-model="password"> <input name="confirm_password"
<strong>ui-validate</strong>=" '$value==password' "
<strong>ui-validate-watch</strong>=" 'password' "> Passwords match? {{!!form.confirm_password.$error.validator}} ...
$scope.notBlackListed = function(value) { var blacklist = ['bad@domain.com','verybad@domain.com']; return blacklist.indexOf(value)
=== -1; }</pre>
<h3>How?</h3>
<h4>ui-validate</h4>
<p>Create an expression inside a string. If it evaluates to
<code>true</code>the input is valid, the rule name will be
<code>validator</code> by default.</p>
<pre class="prettyprint">ui-validate=" 'validateFoo($value)' " Input is valid: {{!!myForm.myInput.$error.validator}}</pre>
<p>
<strong>Or</strong> define multiple rules by creating an object where the key is the rule name and the value is the expression string.</p>
<pre
class="prettyprint">ui-validate="{foo:'valFoo($value)', bar:'$value == someVar'}" Foo rule passes: {{!!myForm.myInput.$error.foo}} Bar rule
passes: {{!!myForm.myInput.$error.bar}}</pre>
<h4>ui-validate-async</h4>
<p>Create an expression inside a string. Expresion must return a promise. The rule name will be
<code>validatorAsync</code> by default. Until promise is fulfilled, rule is placed on $pending list.
if promise is rejected, validation fail.
</p>
<pre class="prettyprint">ui-validate-async=" 'validateAsyncFoo($value)' " Input is valid: {{!!myForm.myInput.$error.validatorAsync}}</pre>
<p>
<strong>Or</strong> define multiple rules by creating an object where the key is the rule name and the value is the expression string.</p>
<pre
class="prettyprint">ui-validate-async="{fooAsync:'valAsyncFoo($value)'}" fooAsync rule passes: {{!!myForm.myInput.$error.fooAsync}} </pre>
</div>
</div>
</section>
</body>
</html>