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

在新的项目中巧妙地接触到了Google提供的前端MVC框架 AngularJS，它的数据双向绑定真的能够让前端开发者从繁复的DOM操作中解放出来。

在我断断续续的学习AngularJS一个多月后，可以来讲讲我的 AngularJS 学习笔记了，当前首先要讲的是前端必不可少的元素——表单，以下用ng代替AngularJS，本文章适合有一定ng基础的同学。

Demo页面我使用Bootstrap3.2.0作为前端显示框架，同时引入了jQuery1.11.1，AngularJS 为刚刚新发布的1.2.25（使用1.3.0-rc2出现了一个奇怪的BUG，看来还是稳定版稳定），首先来一个大而全的表单页面：

<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.$err