AngularJS校验用户输入

最新推荐文章于 2024-07-13 06:11:34 发布

wjxbj

最新推荐文章于 2024-07-13 06:11:34 发布

阅读量223

点赞数

分类专栏： AngularJS 文章标签： javaScript AngularJS form ViewUI

本文链接：https://blog.csdn.net/wjxbj/article/details/84628661

版权

AngularJS 专栏收录该内容

85 篇文章 0 订阅

订阅专栏

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>

运行结果：

输入完成后，Submit按钮可点击

点击后页面如下：

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

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

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