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 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 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 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>