Angular 表单验证 基础篇

<div class="nav">
　　<h4>表单验证</h4>
　　<form ng-app="myApp" name="myForm" novalidate>
　　　　<p>用户名:<br>
　　　　　　<input type="text" name="user" ng-model="user" ng-minlength="6"
　　　　　　ng-maxlength="16" ng-pattern="/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,11}$/" required>
　　　　　　<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
　　　　　　　　<span ng-show="myForm.user.$error.required">请填写用户名</span>
　　　　　　　　<span ng-show="myForm.user.$error.pattern ||
　　　　　　　　myForm.user.$error.minlength">用户名以字母开头最小长度6 </span>
　　　　　　</span>
　　　　</p>
　　　　<p>邮箱:<br>
　　　　　　<input type="email" name="email" ng-model="email" required>
　　　　　　<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
　　　　　　　　<span ng-show="myForm.email.$error.required">请填写邮箱</span>
　　　　　　　　<span ng-show="myForm.email.$error.email">请填写正确邮箱地址</span>
　　　　　　</span>
　　　　</p>
　　　　<p>手机号码:<br>
　　　　　　<input type="number" name="number" ng-model="number"
　　　　　　ng-minlength="11" maxlength="11" required>
　　　　　　<span style="color:red" ng-show="myForm.number.$dirty && myForm.number.$invalid">
　　　　　　　　<span ng-show="myForm.number.$error.number">请输入正确手机号码</span>
　　　　　　　　<span ng-show="myForm.number.$error.minlength ||
　　　　　　　　myForm.number.$error.maxlength">请输入11位手机号码</span>
　　　　　　</span>
　　　　</p>
　　　　<p>
　　　　　　<input type="submit"ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
　　　　　　myForm.email.$dirty && myForm.email.$invalid ||
　　　　　　myForm.number.$dirty && myForm.number.$invalid">
　　　　</p>
　　</form>
</div>

//js引入

<script type="text/javascript" src="js/angular.min.js" ></script>