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>