AngularJS表单验证【失去焦点再提示】

最新推荐文章于 2022-07-07 17:56:40 发布

weixin_34310127

最新推荐文章于 2022-07-07 17:56:40 发布

阅读量354

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3060934/blog/877558

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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

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

<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>

转载于:https://my.oschina.net/u/3060934/blog/877558