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