AngularJs 表单及输入验证
AngularJS 表单是输入控件的集合。AngularJS 提供了多种多样的表单元素,以及丰富的验证方式。
HTML 控件
以下 HTML input 元素被称为 HTML 控件:
- input 元素
- select 元素
- button 元素
- textarea 元素
数据绑定
Input 控件使用 ng-model
指令来实现数据绑定。
<input type="text" ng-model="firstname">
通过以上代码应用有了一个名为 firstname 的属性。
它通过 ng-model 指令来绑定到你的应用。
firstname 属性可以在 controller 中使用:
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
也可以在应用的其他地方使用:
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Checkbox(复选框)
checkbox 的值为 true 或 false,可以使用 ng-model 指令绑定,它的值可以用于应用中:
示例
复选框选中后显示 h1 标签内容:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
单选框
我们可以使用 ng-model 来绑定单选按钮到你的应用中。
单选框使用同一个 ng-model ,可以有不同的值,但只有被选中的单选按钮的值会被使用。
实例
根据选中的单选按钮,显示信息:
<form>
选择一个选项:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
myVar 的值可以是 dogs, tuts, 或 cars。
下拉菜单
使用 ng-model 指令可以将下拉菜单绑定到你的应用中。
ng-model 属性的值为你在下拉菜单选中的选项:
示例
根据选中的下拉菜单选项,显示信息:
<form>
选择一个选项:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
myVar 的值可以是 dogs, tuts, 或 cars。
AngularJS 输入验证
AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。我们可以使用 ng-click
事件来处理点击按钮,并使用 $dirty 和 $invalid 标志进行验证。
警告
- 客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。
<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>
提示
- HTML 表单属性 novalidate 用于禁用浏览器默认的验证。
实例解析
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性: user 和 email。
我们使用了 ng-show
指令, color:red 在邮件的 $dirty 或 $invalid 都为 true 时才显示。
属性 | 描述 |
---|---|
$dirty | 表单有填写记录 |
$valid | 字段内容合法的 |
$invalid | 字段内容是非法的 |
$pristine | 表单没有填写记录 |