AngularJS校验用户输入

        Angular自动为<form>元素增加了一些很好用的特性,使其更适合开发单页面应用。其中一个特性是,Angular允许你为表单中的输入元素定义一个合法的状态,并且只有当所有元素是合法状态时才允许提交表单。

        例如,创建一个新用户注册表单,要求必须输入用户名和邮件地址,但是年龄字段是可选的,在这些字段被提交到服务器之前我们可以校验这几个输入项。

        利用Angular的<form>扩展以及大量的输入元素,我们可以在模板中实现以上效果,示例如下:

<html ng-app='myApp'>
<head>
	<title>form实例</title>
</head>
<body>
	<h1>Sign Up</h1>
	<form name='addUserForm' ng-controller='AddUserController'>
		<div ng-show='message'>{{message}}</div>
		<div>First name:<input ng-model='user.first' required></input></div>
		<div>Last name:<input ng-model='user.last' required></input></div>
		<div>Email:<input type='email' ng-model='user.email' required></input></div>
		<div>Age:<input type='number' ng-model='user.age' ng-maxlength='3' ng-minlength='1'></input></div>
		<div><button ng-click='addUser()' ng-disabled='!addUserForm.$valid'>Submit</button></div>
	</form>
	<script src="lib/angular/angular.js"></script>
	<script>
		var myApp=angular.module('myApp',[]);
		myApp.controller('AddUserController', function($scope) {
			$scope.message = '';
			$scope.addUser = function() {
				$scope.message = 'Thanks,' + $scope.user.first + ',we added you!';
			};
		});
	</script>
</body>
</html>

运行结果:
AngularJS校验用户输入
输入完成后,Submit按钮可点击
AngularJS校验用户输入

点击后页面如下:
AngularJS校验用户输入

        注意,我们使用了HTML5的required属性以及email和number两种输入类型,用来校验其中的一些字段。这一机制在Angular中工作得很好,而对于那些老式的不支持HTML5的浏览器来说,Angular会自动使用指令来适配,从而实现相同的功能。

        在控制器中,我们可以通过$valid属性获取表单的校验状态。当表单中的所有输入项都合法时,Angular将会把这个属性设置为true。我们可以使用$valid属性来做很多很炫的事情,例如当表单没有输入完成时可以禁用Submit按钮。如上实例,我们在Submit按钮上添加一个ng-disabled指令,从而避免提交非法状态的表单。

 

资料来源:《用AngularJS开发下一代Web应用》

你可能感兴趣的:(JavaScript,form,AngularJS)