AngularJS内置指令示例——表单验证

最新推荐文章于 2024-04-21 05:35:34 发布

bboyjoe

最新推荐文章于 2024-04-21 05:35:34 发布

阅读量3.2k

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/bboyjoe/article/details/50773453

版权

AngularJS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

示例1：

<html ng-app='TestFormModule'>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script src="framework/angular-1.3.0.14/angular.js"></script>
		<script src="FormBasic.js"></script>
	</head>
	<body>
		<form name="myForm" ng-submit="save()" ng-controller="TestFormModule">
			  <input name="userName" type="text" ng-model="user.userName" required/>
			  <input name="password" type="password" ng-model="user.password" required/>
			  <input type="submit" ng-disabled="myForm.$invalid"/>
		</form>
	</body>
</html>

var appModule = angular.module('TestFormModule', []);
appModule.controller("TestFormModule",function($scope){
	$scope.user={
		userName:'Jason',
		password:''
	};
	$scope.save=function(){
		alert("保存数据!");
	}
});

结果：只有密码有输入，保存框才能可用。

示例2：

<!doctype html>
<html ng-app="form-example2">
	<head>
		<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<script src="framework/angular-1.3.0.14/angular.js"></script>
		<script src="FormCustom.js"></script>
		<style type="text/css">
			div[contentEditable] {
				cursor: pointer;
				background-color: #D0D0D0;
			}
		</style>
	</head>
	<body>
		<div>
			<div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
			<pre>model = {{content}}</pre>
		</div>
	</body>
</html>

angular.module('form-example2', []).directive('contenteditable', function() {
	return {
		require : 'ngModel',
		link : function(scope, elm, attrs, ctrl) {
			// view -> model
			elm.bind('keyup', function() {
				scope.$apply(function() {
					ctrl.$setViewValue(elm.text());
				});
			});

			// model -> view
			ctrl.$render = function() {
				elm.html(ctrl.$viewValue);
			};

			// load init value from DOM
			ctrl.$setViewValue(elm.html());
		}
	};
});

示例3：

<!doctype html>
<html ng-app>
	<head>
		<script src="framework/angular-1.3.0.14/angular.js"></script>
		<script src="FormAdv1.js"></script>
	</head>
	<body>
		<div ng-controller="Controller">
			<form name="form" class="css-form" novalidate>
				Name:
				<input type="text" ng-model="user.name" name="uName" required /><br/>
				E-mail:
				<input type="email" ng-model="user.email" name="uEmail" required /><br/>
				<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">
					Invalid:
					<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
					<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
				</div>
				Gender:<br/>
				<input type="radio" ng-model="user.gender" value="male" />
				male
				<input type="radio" ng-model="user.gender" value="female" />
				female<br/>
				<input type="checkbox" ng-model="user.agree" name="userAgree" required />
				I agree:
				<input ng-show="user.agree" type="text" ng-model="user.agreeSign" required />
				<div ng-show="!user.agree || !user.agreeSign">
					Please agree and sign.
				</div>
				<br/>
				<button ng-click="reset()" ng-disabled="isUnchanged(user)">
					RESET
				</button>
				<button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">
					SAVE
				</button>
			</form>
		</div>
	</body>
</html>

function Controller($scope) {
	$scope.master = {};

	$scope.update = function(user) {
		$scope.master = angular.copy(user);
	};

	$scope.reset = function() {
		$scope.user = angular.copy($scope.master);
	};

	$scope.isUnchanged = function(user) {
		return angular.equals(user, $scope.master);
	};

	$scope.reset();
}

示例4：

<!doctype html>
<html ng-app="form-example1">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" media="screen">
		<script src="framework/angular-1.3.0.14/angular.js"></script>
		<script src="FormValidation.js"></script>
	</head>
	<body>
		<div>
			<form name="myForm" class="css-form" novalidate>
				<div>
					整数(0-10):
					<input type="number" ng-model="size" name="size" min="0" max="10" integer/>
					{{size}}
					<br/>
					<span ng-show="myForm.size.$error.integer">不是合法的整数！</span>
					<span ng-show="myForm.size.$error.min || myForm.size.$error.max">
						数值必须位于0到10之间！
					</span>
				</div>
				<div>
					浮点数:
					<input type="text" ng-model="length" name="length" smart-float />
						{{length}}
					<br/>
					<span ng-show="myForm.length.$error.float">不是合法的浮点数！</span>
				</div>
				<div>
					远程校验:
					<input type="text" ng-model="remote" name="remote" remote-validation />
						{{remote}}
					<br/>
					<span ng-show="myForm.remote.$error.remote">非法数据！</span>
				</div>
			</form>
		</div>
	</body>
</html>

var app = angular.module('form-example1', []);
var INTEGER_REGEXP = /^\-?\d*$/;
app.directive('integer', function() {
	return {
		require : 'ngModel',
		link : function(scope, elm, attrs, ctrl) {
			ctrl.$parsers.unshift(function(viewValue) {
				if (INTEGER_REGEXP.test(viewValue)) {
					ctrl.$setValidity('integer', true);
					return viewValue;
				} else {
					ctrl.$setValidity('integer', false);
					return undefined;
				}
			});
		}
	};
});

var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
app.directive('smartFloat', function() {
	return {
		require : 'ngModel',
		link : function(scope, elm, attrs, ctrl) {
			ctrl.$parsers.unshift(function(viewValue) {
				if (FLOAT_REGEXP.test(viewValue)) {
					ctrl.$setValidity('float', true);
					return parseFloat(viewValue.replace(',','.'));
				} else {
					ctrl.$setValidity('float', false);
					return undefined;
				}
			});
		}
	};
});

app.directive('remoteValidation', function($http) {
	return {
		require : 'ngModel',
		link : function(scope, elm, attrs, ctrl) {
			elm.bind('keyup', function() {
			    $http({method: 'GET', url: 'FormValidation.jsp'}).
			    success(function(data, status, headers, config) {
			    	if(parseInt(data)==0){
			    		ctrl.$setValidity('remote',true);
			    	}else{
			    		ctrl.$setValidity('remote',false);
			    	}
			    }).
			    error(function(data, status, headers, config) {
			    	ctrl.$setValidity('remote', false);
			    });
			});
		}
	};
});

bboyjoe

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AngularJS内置指令示例——表单验证

示例1： var appModule = angular.module('TestFormModule', []);appModule.controller("TestFormModule",function($scope){ $scope.user={ userName:'Jason', passw
复制链接

扫一扫