如何做自动工具提示验证消息？

Question

在这里我创建了用于验证的示例文件，它工作正常......

但我的要求是我需要在验证时对其进行一些修改。错误消息需要显示在自动工具提示中。它需要在出现错误时自动显示，并在错误清除后自动隐藏。直到错误清除弹出需要保留。

如果可以不使用 jquery 或者使用 jquery 也可以。

var app = angular.module('myapp', ['UserValidation']);

myappCtrl = function($scope) {
    $scope.formAllGood = function () {
        return ($scope.usernameGood && $scope.passwordGood && $scope.passwordCGood)
    }
        
}

angular.module('UserValidation', []).directive('validUsername', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                // Any way to read the results of a "required" angular validator here?
                var isBlank = viewValue === ''
                var invalidChars = !isBlank && !/^[A-z0-9]+$/.test(viewValue)
                var invalidLen = !isBlank && !invalidChars && (viewValue.length < 5 || viewValue.length > 20)
                ctrl.$setValidity('isBlank', !isBlank)
                ctrl.$setValidity('invalidChars', !invalidChars)
                ctrl.$setValidity('invalidLen', !invalidLen)
                scope.usernameGood = !isBlank && !invalidChars && !invalidLen

            })
        }
    }
}).directive('validPassword', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                var isBlank = viewValue === ''
                var invalidLen = !isBlank && (viewValue.length < 8 || viewValue.length > 20)
                var isWeak = !isBlank && !invalidLen && !/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/.test(viewValue)
                ctrl.$setValidity('isBlank', !isBlank)
                ctrl.$setValidity('isWeak', !isWeak)
                ctrl.$setValidity('invalidLen', !invalidLen)
                scope.passwordGood = !isBlank && !isWeak && !invalidLen

            })
        }
    }
}).directive('validPasswordC', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue, $scope) {
                var isBlank = viewValue === ''
                var noMatch = viewValue != scope.myform.password.$viewValue
                ctrl.$setValidity('isBlank', !isBlank)
                ctrl.$setValidity('noMatch', !noMatch)
                scope.passwordCGood = !isBlank && !noMatch
            })
        }
    }
})

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
    <form  name="myform" class="form form-horizontal" ng-controller="myappCtrl" novalidate>
    <legend>Angular User Validation with Bootstrap Decorations</legend>
    <div class="control-group" ng-class="{error:!myform.username.$valid}">
        <label for="inputUsername" class="control-label">Username:</label>
        <div class="controls">
            <input type="text" id="inputUsername" name="username" ng-model="username" valid-username />
            <div class="help-inline">
                <span ng-show="!!myform.username.$error.isBlank">Username Required.</span>
				<span ng-show="!!myform.username.$error.invalidChars">Username must contain letters &amp; spaces only.</span>
                <span ng-show="!!myform.username.$error.invalidLen">Username must be 5-20 characters.</span>
            </div>
        </div>
    </div>
    <div class="control-group" ng-class="{error:!myform.password.$valid}">
        <label for="inputPassword" class="control-label">Password:</label>
        <div class="controls">
            <input type="text" id="inputPassword" name="password" ng-model="password" valid-password />
            <div class="help-inline">
                <span ng-show="!!myform.password.$error.isBlank">Password Required.</span>
                <span ng-show="!!myform.password.$error.isWeak">Must contain one upper &amp; lower case letter and a non-letter (number or symbol.)</span> 
                <span ng-show="!!myform.password.$error.invalidLen">Must be 8-20 characters.</span>
            </div>
        </div>
    </div>
    <div class="control-group" ng-class="{error:!myform.password_c.$valid}">
        <label for="password_c" class="control-label">Confirm Password:</label>
        <div class="controls">
            <input type="text" id="password_c" name="password_c" ng-model="password_c" valid-password-c />
            <div class="help-inline"> 
                <span ng-show="!!myform.password_c.$error.isBlank">Confirmation Required.</span>
                <span ng-show="!!myform.password_c.$error.noMatch">Passwords don't match.</span>
            </div>
        </div>
    </div>
    <div class="form-actions" ng-show="formAllGood()">
        <input type="submit" class="btn btn-primary" value="Submit" />
    </div>
    </form></div>

Answer 1

是的，可以在任何事件上显示/隐藏弹出框。下面的代码描述了一个使用 popover 的数字验证函数。

JSFiddle.

function validate(el) {
  var regex = /^\d+$/g;
  var valid = regex.test(el.value);
  if (!valid) {
    
    // Check if popover is already visible to handle flicker effect.
    if ($("#txtInput").next('div.popover').length == 0) {
      
      $('#txtInput').popover({
        placement: 'bottom',
        content: 'This is not a valid entry'
      }).popover('show');
      
    }
  } else {
    $('#txtInput').popover('hide');
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<input type="text" id="txtInput" onkeyup="validate(this)">

参考资料：

• Check visibility
• Documentation。

Answer 2

最好的解决方案是使用 Parsley.js

为什么选择欧芹：

• 可以自定义验证事件（onsubmit、onkeyup 或任何其他事件）
• 可以自定义验证样式
• 一旦输入满足条件，验证消息将自动消失

查看他们的examples