您的位置：首页 > Web前端 > AngularJS

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

2017-04-12 00:00 495 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： AngularJS 表单验证失去焦点焦点

相关文章推荐

新的分享

章节导航