[ AngularJS表单验证 ] 失去焦点再提示

发表于 | 更新于 | 分类于 ， ， ， | 评论数： | 阅读次数：

使用angular自带的表单验证时，页面加载的时候就显示出来了，用户体验不太好，我们的需求是，只有当输入框失去了焦点的时候才显示提示内容

解决办法：利用了angularjs表单验证的错误对象 myForm.input.$error，给这个对象添加一个判断当前输入框是否失去焦点的属性 myForm.input.$error.blur。然后利用input的事件ng-focus，ng-blur来动态改变这个值。

注意：因为一开始 myForm.input.$error.blur 没有给定初始值，所以肯定是false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
	<head>
		<title></title>
        <--引用自己的js-->
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			angular.module('app', [])
		</script>
	</head>

	<body ng-app="app">
		<form name="myForm" >
			<div class="">
				用户名
				<input name="input" ng-model="userType" ng-blur="myForm.input.$error.focus=false" ng-focus="myForm.input.$error.focus=true" required>
				<span ng-show="myForm.input.$error.required && !myForm.input.$error.focus">必填项</span><br>
			</div>
			<div class="">
				密码:
				<input name="psd" ng-model="psd" ng-blur="myForm.psd.$error.blur=true" ng-focus="myForm.psd.$error.blur=false" required>
				<span ng-show="myForm.psd.$error.required &&myForm.psd.$error.blur">必填项</span><br>
			</div>
		</form>
	</body>
</html>

坚持原创技术分享，您的支持将鼓励我继续创作！