Question

我是一些验证信息：

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

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

Answer 1

使用$touched：

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

来自 docs ：

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

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。

我希望它有所帮助！

Answer 2

输入模糊时写一些函数来调用。请检查此Fiddle

$scope.blurred = function() {

    };

输入模糊时调用此函数

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

在焦点输出文本框或用户完全键入后显示验证消息

2 个答案: