AngularJS 注册表单的实例
html:
<!doctype html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<link href="css.css"/>
<script type="text/javascript" src="JavaScript1.js"></script>
</head>
<body>
<form name="signup_form" novalidate ng-submit="signupForm()">
<fieldset>
<legend>Signup</legend>
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text"
placeholder="Name"
name="name"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Your email</label>
<input type="email"
placeholder="Email"
name="email"
ng-model="signup.email"
ng-minlength=3 ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
<small class="error"
ng-show="signup_form.email.$error.required">
Your email is required.
</small>
<small class="error"
ng-show="signup_form.email.$error.minlength">
Your email is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.email.$error.email">
That is not a valid email. Please input a valid email.
</small>
<small class="error"
ng-show="signup_form.email.$error.maxlength">
Your email cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<div class="large-12 columns">
<label>Username</label>
<input type="text"
placeholder="Desired username"
name="username"
ng-model="signup.username"
ng-minlength=3
ng-maxlength=20
ensure-unique="username" required />
<div class="error" ng-show="signup_form.username.$dirty && signup_form.username.$invalid">
<small class="error" ng-show="signup_form.username.$error.required">Please input a username</small>
<small class="error" ng-show="signup_form.username.$error.minlength">Your username is required to be at least 3 characters</small>
<small class="error" ng-show="signup_form.username.$error.maxlength">Your username cannot be longer than 20 characters</small>
<!--<small class="error" ng-show="signup_form.username.$error.unique">That username is taken, please try another</small>-->
</div>
</div>
<button type="submit" ng-disabled="signup_form.$invalid" class="button radius">Submit</button>
</fieldset>
</form>
</body>
</html>
css:
body {
background-color: #fff;
border-top: 5px solid #3399cc;
}
html {
background: #fff;
}
.row {
border: 0px solid green;
}
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
JavaScript:
angular.module('myApp', [])
.directive('ensureUnique', ['$http', function ($http) {
return {
require: 'ngmodel',
link: function (scope, ele, attrs, c) {
scope.$watch(attrs.ngmodel, function () {
$http({
method: 'POST',
url: '/api/check/' + attrs.ensureUnique,
data: { 'field': attrs.ensureUnique }
}).success(function (data, status, headers, cfg) {
c.$setValidity('unique', data.isUnique);
}).error(function (data, status, headers, cfg) {
c.$setValidity('unique', false);
});
});
}
};
}]);
