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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。