<form ng-submit="formSign()" name="formSub" novalidate ng-controller="formCtrl" class="formSign">
<div class="form-group">
<label>用户名：</label>
<input type="text" name="user" id="user" placeholder="输入手机号码" required ng-model="formDate.user" ng-class="{'error':formSub.user.$invalid && formSub.user.$dirty}" ng-pattern="/^(13[0-9]|14[5|7]|15[\d]|18[\d])\d{8}$/" class="form-control" />
<p ng-if="formSub.user.$error.pattern && formSub.user.$dirty">输入11位电话号码</p>
<p ng-if="formSub.user.$error.required && formSub.user.$dirty">手机号码不能为空</p>
</div>
<div class="form-group">
<label>密码：</label>
<input type="text" name="password" id="password" placeholder="输入密码 4-16位" required ng-model="formDate.password" ng-class="{'error':formSub.password.$invalid && formSub.password.$dirty}" ng-minlength="4" ng-maxlength="16" class="form-control" />
<p ng-if="formSub.password.$error.required && formSub.password.$dirty">密码不能为空</p>
<p ng-if="(formSub.password.$error.minlength || formSub.password.$error.maxlength) && formSub.password.$dirty">输入4到16位密码</p>
</div>
<div class="form-group">
<label>确认密码：</label>
<input type="text" name="password2" id="password2" placeholder="确认密码" required ng-model="formDate.password2" ng-class="{'error':formSub.password2.$invalid && formSub.password2.$dirty}" ng-minlength="4" ng-maxlength="16" class="form-control" />
<p ng-if="formSub.password2.$error.required && formSub.password2.$dirty">密码不能为空</p>
<p ng-show="(formDate.password != formDate.password2) && formSub.password2.$dirty">两次输入不一致</p>
</div>
<button class="btn btn-primary" ng-disabled="(formDate.password != formDate.password2) ||formSub.$invalid">提交</button>
</form>
</body>
<script type="text/javascript">
angular.module('MyForm', [])
.controller('formCtrl', function($scope) {
$scope.formData = {};
$scope.formSign = function() {
console.log($scope.formDate);
if($scope.formSub.$invalid) {
alert('信息有误')
} else {
alert('提交完成')
}
}
})
</script>
