<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/angular-1.2.16.js" ></script>
</head>
<body>
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<p><input type="text" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required="required" /></p>
<div style="color: red;" ng-show="signup_form.name.$dirty&&signup_form.name.$invalid&&signup_form.submitted">
<small ng-show="signup_form.name.$error.required">姓名是必填项</small>
<small ng-show="signup_form.name.$error.minlength">姓名至少要3个字符</small>
<small ng-show="signup_form.name.$error.maxlength">姓名最多20个字符</small>
</div>
<input type="submit" value="提交" />
</form>
</body>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('signupController',function($scope){
$scope.submitted=false;
$scope.signupForm=function(){
if($scope.signup_form.$valid){
alert("验证通过");
}else{
$scope.signup_form.submitted=true;
}
}
});
</script>
</html>
当点击提交呢按钮后就会出现提示信息.
运行结果:
