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

时间 2019-11-19

标签 angularjs 表单验证失去焦点再提示栏目 AngularJS 繁體版

原文原文链接

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

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

注意：由于一开始 myForm.input.$error.blur 没有给定初始值，因此确定是falsejava

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