<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-controller="myController">
<form name="formName" action="">
<input type="text" name="username" placeholder="请输入用户名" required="required" ng-model="user.username" ng-minlength="6" ng-maxlength="18"/>
<input type="tel" ng-pattern="/^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/" name="tel" placeholder="请输入手机号" required="required" ng-model="user.tel"/>
<input type="password" name="psw" required="required" placeholder="请输入密码" ng-model="user.psw" />
<button type="button" ng-disabled="formName.$invalid" ng-click="getData()">提交</button>
</form>
<p ng-show="formName.username.$error.minlength">用户名长度不能少于6位</p>
<p ng-hide="!formName.username.$error.maxlength">用户名长度不能大于18位</p>
<p ng-show="formName.username.$dirty&&form.username.$invalid">用户名不符合规则</p>
<p ng-show="formName.tel.$error.pattern">你输入的手机号码有误</p>
<script src="js/angular.js"></script>
<script type="text/javascript">
angular.module("myApp",[])
.controller("myController",["$scope",function($scope){
}])
</script>
</body>
</html>
上面是一个小的demo
通过调试可以看出,表单验证是通过 fromName.inputname.$error.条件名字来验证的。返回的是一个布尔值。
fromName.
invalid:如果表单验证没通过,返回true。相对fromName.
valid:如果表单验证通过,返回true。
fromName.
dirty:如果表单被修改过,返回true相对fromName.
pristine:如果表单被修改过,返回true
还有一个问题就是利用ng-repeat写单选框时,必须给外input外部套一个div
<div ng-repeat="item in data">
<input type="radio" name="sex" id="sex" value="{{item.id}}"/>{{item.text}}
</div>