前面我演示了angular的表单验证示例：angularJS的表单验证示例 ，其实我们可以使用angular提供的模块messages进行更轻松的表单验证，
<html>
<head>
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/angular.js/1.4.4/angular.js"></script>
<script src="angular-messages.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module('app', ['ngMessages']);
app.controller('Ctrl',function () {
})
</script>
</head>
<style type="text/css">
.error{color: indianred;}
.success{color: green;}
</style>
<body ng-app='app'>
<div ng-controller="Ctrl">
<form class="form-horizontal" name="form" role="form">
<div class="form-group">
<label for="user" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-5">
<input type="text" ng-model="user.username" name="user" ng-pattern="/^[a-zA-Z]\w{2,10}[a-zA-Z\d]$/" class="form-control" required="required">
</div>
<div ng-messages="form.user.$error">
<div ng-message="required">必填项</div>
<div ng-message="pattern">不符合</div>
</div>
</div>
<button ng-disabled="form.$invalid">提交</button>
</form>
</div>
</body>
</html>
html代码不变，只是我们引入angular-messages.js文件，在下面直接使用ng-message指令就可以很轻松的显示我们想要显示的内容
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索文件
， 模块
代码
angularjs 表单验证、angularjs的表单验证、angularjs2 表单验证、用angularjs验证表单、angularjs 非表单验证，以便于您获取更多的相关知识。
时间： 2024-10-28 14:16:17