聚焦文本框或用户完全输入后显示验证消息答案

【问题标题】：Show Validation message after focus-out textbox or user typed fully聚焦文本框或用户完全输入后显示验证消息
【发布时间】：2016-07-13 14:38:46
【问题描述】：

我是一些验证消息：

<form name="dnaform" novalidate>
    <div style="padding-bottom:5px" ng-show="dnaform.uEmail.$pristine || dnaform.uEmail.$valid">Active directory account </div>
    <div style="padding-bottom:5px;" ng-show="dnaform.uEmail.$dirty && dnaform.uEmail.$error.required" class="help-block">Email is Required.</div>
    <div style="padding-bottom:5px;" ng-show="dnaform.uEmail.$error.email" class="help-block">Invalid Email.</div>
    <input type="email" name="uEmail" class="form-control txtBoxEdit type7N" ng-model="useremail" required>
</form>

问题是它会在用户在电子邮件文本框中输入内容时立即显示验证消息，但我想在用户输入完整的电子邮件文本或文本框的焦点时显示该消息。

【问题讨论】：

ng-blur 超过 input 元素怎么样？
@develper033 第一次可以工作..但第二次不工作。你能做个小提琴吗？
@SivaRajini，请查看最新版本。

标签： javascript html css angularjs

【解决方案1】：

编写一些函数以在输入模糊时调用。检查这个Fiddle

$scope.blurred = function() {

    };

输入模糊时调用此函数

<input type="text" ng-blur="blurred(inputsData)" ng-model="inputsData">

【讨论】：

【解决方案2】：

使用$touched:

<div style="padding-bottom:5px;" ng-if="dnaform.uEmail.$touched && dnaform.uEmail.$error.email" class="help-block">Invalid Email.</div>

来自文档：

ng-touched：控件已经模糊，换句话说，一旦该字段被触摸，它将在其他时间保持验证，但由于您不想要它，您应该将它添加到您的 @ 987654325@:

ng-model-options="{ updateOn: 'blur' }"

片段：

(function() {
  'use strict';
  angular.module('app', [])
    .controller('mainCtrl', function($scope) {

    })
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <form name="dnaform" novalidate>
    <div style="padding-bottom:5px" ng-show="dnaform.uEmail.$pristine || dnaform.uEmail.$valid">Active directory account </div>
    <div style="padding-bottom:5px;" ng-show="dnaform.uEmail.$dirty && dnaform.uEmail.$error.required" class="help-block">Email is Required.</div>
    <div style="padding-bottom:5px;" ng-if="dnaform.uEmail.$touched && dnaform.uEmail.$error.email" class="help-block">Invalid Email.</div>
    <input type="email" name="uEmail" ng-model-options="{ updateOn: 'blur' }" class="form-control txtBoxEdit type7N" ng-model="useremail" required>
</form>
</body>

</html>

更多信息请查看here。

希望对你有帮助！

【讨论】：