下面举一个简单的例子：提交表单时验证，input为必填项
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>服务</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<style>
/*表单不符合要求：带红框*/
.ng-invalid{
border-width:1px!important;
border-color: #e66a7b!important;
}
</style>
</head>
<body ng-controller="cc">
<form name="formName" novalidate>
<!-- 注意：一定要绑定ng-model,否则点击提交时，即便input为空也会验证通过 -->
<input ng-model="name1" type="text" required>
<input ng-model="name2" type="text" required>
<button ng-click="submitData()">提交</button>
</form>
</body>
<script type="text/javascript">
angular.module('app',[])
.controller('cc',function($scope) {
//点击提交时验证整个表单是否符合要求
$scope.submitData=function () {
if($scope.formName.$valid){
alert('符合要求')
}
else{
alert('表单不符合要求')
}
}
})
</script>
</html>结果显示：input为空时页面有红色框提示
表单有效和无效的区别：可以定位到两个input，查看input上的class ，通过不同的class可以添加不同的样式（像举的例子中，为空的的input加了红色的框）
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
