AngularJS 学习笔记（表单校验篇） 示例

<div class="row" ng-controller="myCtrl">  
    <div class="col-sm-6">  
        <form name="myForm" autocomplete="off" ng-submit="doSubmit()" novalidate>  
            <fieldset>  
                <legend>My AngularJS Form</legend>  
                <div class="form-group" ng-class="{'has-error':myForm.submitted && myForm.username.$invalid}">  
                    <label for="username"><code>*</code>用户名称</label>  
                    <!---->  
                    <input type="text" class="form-control" name="username" ng-model="formArgs.username" ng-minlength="5" ng-maxlength="30" required>  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.username.$error.required">请输入5-30个字符的用户名称！</span>  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.username.$error.minlength">输入的用户名必须在5至30个字符之间！</span>  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.username.$error.remoted">输入的用户名称已经被使用！</span>  
                </div>  
                <div class="form-group" ng-class="{'has-error':myForm.submitted && myForm.userEmail.$invalid}">  
                    <label for="userEmail"><code>*</code>用户邮箱</label>  
                    <!---->  
                    <input type="email" class="form-control" name="userEmail" ng-model="formArgs.userEmail" maxlength="30" required>  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.userEmail.$error.required">请输入您常用的电子邮箱！</span>  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.userEmail.$error.email">输入的电子邮箱地址有误！</span>  
                </div>  
                <div class="form-group" ng-class="{'has-error':myForm.submitted && myForm.password.$invalid}">  
                    <label for="password"><code>*</code>用户密码</label>  
                    <!---->  
                    <input type="password" class="form-control" name="password" ng-model="formArgs.password" ng-minlength="8" ng-maxlength="30" required>  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.password.$error.required">请输入8-30个字符的用户密码！</span>  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.password.$error.minlength">输入的重复密码必须在8至30个字符之间！</span>  
                </div>  
                <div class="form-group" ng-class="{'has-error':myForm.submitted && myForm.rpassword.$invalid}">  
                    <label for="rpassword"><code>*</code>重复密码</label>  
                    <!---->  
                    <input type="password" class="form-control" name="rpassword" ng-model="tmpArgs.rpassword" ng-minlength="8" ng-maxlength="30" my-pwd-match="myForm.password"  
                        required>  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.rpassword.$error.required">请输入8-30个字符的重复密码！</span>  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.rpassword.$error.minlength">输入的重复密码必须在8至30个字符之间！</span>  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.rpassword.$error.pwdmatch">重复密码必须与用户密码一致！</span>  
                </div>  
                <div class="form-group" ng-class="{'has-error':myForm.submitted && myForm.userUrl.$invalid}">  
                    <label for="userUrl">用户主页</label>  
                    <!---->  
                    <input type="url" class="form-control" name="userUrl" ng-model="formArgs.userUrl" maxlength="200">  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.email.$error.url">输入的网址有误！</span>  
                </div>  
                <div class="form-group" ng-class="{'has-error':myForm.submitted && myForm.userAge.$invalid}">  
                    <label for="userAge">用户年龄</label>  
                    <!---->  
                    <input type="number" class="form-control" name="userAge" ng-model="formArgs.userAge" min="0" max="150">  
                    <!---->  
                    <span class="help-block" ng-show="myForm.submitted && myForm.userAge.$error.number">输入的年龄有误！</span>  
                </div>  
                <div class="form-group" ng-class="{'has-error':myForm.submitted && myForm.safeType.$invalid}">  
                    <label for="safeType"><code>*</code>安全选项</label>  
                    <!---->  
                    <select class="form-control" name="safeType" ng-model="formArgs.safeType" ng-options="it.value as it.text for it in safeTypes" required>  
                        <option value="">--请选择--</option>  
                    </select> <span class="help-block" ng-show="myForm.submitted && myForm.safeType.$error.required">请选择安全选项！</span>  
                </div>  
                <div class="form-group" ng-class="{'has-error':myForm.submitted && myForm.privateType.$invalid}">  
                    <label><code>*</code>谁可以找到我</label>  
                    <div class="radio" ng-init="formArgs.privateType='member'">  
                        <label><input type="radio" name="privateType" value="all" ng-model="formArgs.privateType"> 所与人</label>  
                        <!---->  
                        <label><input type="radio" name="privateType" value="member" ng-model="formArgs.privateType" checked> 注册会员</label>  
                        <!---->  
                        <label><input type="radio" name="privateType" value="self" ng-model="formArgs.privateType"> 只有我自己</label>  
                    </div>  
                </div>  
                <div class="form-group">  
                    <button class="btn btn-warning" type="reset">重置</button>  
                    <button class="btn btn-primary" type="submit">提交</button>  
                </div>  
            </fieldset>  
        </form>  
    </div>  
    <div class="col-sm-6">  
        <pre>{{formArgs|json}}</pre>  
        <pre>{{myForm|json}}</pre>  
    </div>  
</div>