angularjs-表单验证

创建一个注册表单，表单中包括用户名字，邮件地址，和用户名（昵称）；

1、开始定义一个表单

 <form name="signup_form" novalidateng-submit="signupForm()">
        <fieldset>
            <legend>Signup</legend>


            <button type="submit" class="button radius" >Submit</button>
                </div>
            </div>
        </fieldset>
    </form>

表单名称是signup_form，当表单提交时我们调用signupForm（）。
2、添加用户名称
设置了一些验证，验证name字段长度大于3小于20，要求字段必填。

<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>

3、添加email

<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.maxlength">Your email cannot be longer than 20 characters.</small>
                    </div>
                </div>
            </div>

4、添加用户名
功能与上面相同并添加了一个自定义验证

HTML

<div class="row">
                <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>
            </div>

JavaScript

 <script>
        var app = angular.module('myApp',[]);
        app.directive('ensureUnique',function($http){
            return {
                require: 'ngModel',
                link: function(scope, ele, attrs, c){
                    scope.$watch(attrs.ngModel, function(n){
                        if(!n) return;
                        $http({
                            method: 'POST',
                            url: '/api/check/' + attrs.ensureUnique,
                            data: {
                                field: attrs.ensureUinque,
                                value: scope.ngModel
                            }
                        }).success(function(data){
                            c.$setValidity('unique',data.isUnique);
                        }).error(function(data){
                            c.$setValidity('unique',false);
                        });
                    });
                }
            };
        });
    </script>

最后，把按钮放进去。用ng-disabled指令基于表单的合法性来启用或禁用按钮

<button type="submit" class="button radius" ng-disabled="signup_form.$invalid">Submit</button>