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>