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);
                });
            });
        }
    };
}]);

 

posted @ 2015-09-24 11:16  Byron12345  阅读(215)  评论(0)    收藏  举报