angular自带的有表单验证，直接上代码：
<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.3.17/angular.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
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>
<span class="col-sm-5" ng-show="form.user.$pristine">请输入用户名</span>
<span class="col-sm-5 error" ng-show="form.user.$error.required && form.user.$dirty">用户名不能为空</span>
<span class="col-sm-5 error" ng-show="form.user.$invalid && form.user.$dirty && !form.user.$error.required ">用户名不符合规则</span>
<span class="col-sm-5 success" ng-show="form.user.$valid && form.user.$dirty">用户名有效</span>
</div>
<button ng-disabled="form.$invalid">提交</button>
</form>
</div>
</body>
</html>
1.未开始输入时：
2.输入不符合规则时：
3.输入符合规则时：
总结方法有几点：
1.在input上绑定指令ng-pattern ，里面填入正则。
2.可以直接在input里写入require属性，表示必须填入项。
3.定义不同的显示状态span，通过ng-show控制其显示。
4.常用的两个状态，$invalid为无效，$valid为有效。
5.可以使用ng-disabled指令在表单验证不通过的时候，禁用提交表单。
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索代码
属性
angularjs 表单验证、angularjs的表单验证、angularjs2 表单验证、用angularjs验证表单、angularjs 非表单验证，以便于您获取更多的相关知识。
时间： 2024-11-08 20:07:57