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>