AngularJS 是一款广泛应用于前端开发的 JavaScript MVVM 框架。在 AngularJS 中，数据绑定和表单验证是非常关键的两个方面，它们贯穿了应用的整个开发过程。本文旨在介绍 AngularJS 中数据绑定和表单验证的相关知识，并通过实例代码演示它们的具体应用。
AngularJS 的数据绑定
在 AngularJS 中，通过数据绑定可以实现实时更新视图的效果。数据绑定分为单向绑定和双向绑定两种不同的方式。
单向绑定
单向绑定是指将 AngularJS 中的某一项数据绑定到视图中的某一个元素上，只有数据的变化会引起视图的更新。在实际应用中，单向绑定常常用于将视图和控制器之间的数据交流。
下面的代码示例演示了如何在 AngularJS 中进行单向绑定：
// javascriptcn.com 代码示例
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ message }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = 'Hello World!';
});
</script>可以看到，这个示例中使用了 ng-app 和 ng-controller 指令来表示 AngularJS 应用的入口和控制器。其中，{{ message }} 表示了 $scope 中 message 变量的值，当 $scope.message 的值发生变化时，视图中显示的内容也会随之更新。
双向绑定
双向绑定是指将 AngularJS 中的某一项数据绑定到视图中的某一个元素上，并且当用户修改了该元素的值后，也会自动更新到 AngularJS 中的数据中。双向绑定常常用于表单和交互性比较强的页面。
下面的代码示例演示了如何在 AngularJS 中进行双向绑定：
// javascriptcn.com 代码示例
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name">
<p>{{ name }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'Lucy';
});
</script>可以看到，在这个示例中使用了 ng-model 指令将输入框中的值和 $scope 中 name 变量进行了双向绑定，当用户修改输入框中的值时，视图中显示的内容也会随之更新。
AngularJS 的表单验证
在 AngularJS 中，通过表单验证可以对用户的输入进行校验，确保数据的合法性。AngularJS 提供了多种表单验证方式，例如必填、长度、格式、自定义等。
下面的代码示例演示了如何在 AngularJS 中进行表单验证：
// javascriptcn.com 代码示例
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
<input type="text" name="username" ng-model="user.username" required>
<p ng-show="myForm.username.$invalid">用户名不能为空！</p>
<input type="password" name="password" ng-model="user.password" minlength="6" maxlength="12">
<p ng-show="myForm.password.$error.minlength">密码长度不能小于 6 位！</p>
<p ng-show="myForm.password.$error.maxlength">密码长度不能超过 12 位！</p>
<button type="submit" ng-disabled="myForm.$invalid">提交</button>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.user = {
username: '',
password: ''
};
});
</script>可以看到，在这个示例中，通过在 input 标签中添加 name 属性、ng-model 指令和其他验证属性，实现了对输入框数据的验证。在验证不通过时，通过 ng-show 指令将错误提示信息显示出来。在表单中添加 ng-disabled 属性，使按钮在表单验证不通过时不可用。
值得注意的是，当用户提交表单时，如果表单验证不通过，AngularJS 会自动将不合法的输入框标记为 $invalid，并将不合法的状态保存到 $error 对象中。
总结
本文介绍了 AngularJS 中数据绑定和表单验证的相关知识，并通过实例代码演示它们的具体应用。数据绑定和表单验证是 AngularJS 应用开发中非常重要的两个方面，熟练掌握这些技能对于提高应用的开发效率和用户体验非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6530b8277d4982a6eb24766c