Как использовать функцию Checkform() угловой проверки jQuery

если я правильно понял ваш вопрос, вы хотите иметь возможность показать сообщение об ошибке, когда адрес электронной почты недействителен, и вы решите, что хотите показать сообщение об ошибке.

вы можете достичь этого, установив тип ввода по электронной почте, как это <input type=email>

Angular добавляет свойство в форму $valid таким образом, вы можете проверить свой контроллер, если представленный текст действителен. Поэтому нам нужно только получить доступ к этой переменной в контроллере и инвертировать ее. (Потому что мы хотим показывать ошибку, если она недопустима)

$scope.onSubmit = function() {
    // Decide here if you want to show the error message or not
    $scope.mainForm.unvalidSubmit = !$scope.mainForm.$valid
}

Я также добавил кнопку отправки, которая использует проверку браузера при отправке. Сюда onSubmit функция даже не будет вызвана, и браузер покажет ошибку. Эти методы не требуют ничего, кроме angularjs. Вы можете проверить обновленный JSFiddle здесь

обязательно откройте консоль, чтобы увидеть, когда onSubmit функция вызывается и какое значение получает отправка при нажатии кнопки.

можно использовать $трогал, что верно, как только поле сфокусировано, а затем размыто.

 <p class="alert alert-danger" ng-show="mainForm.Email.$touched && !mainForm.validate()">Please correct any errors above before saving.</p>

вы можете достичь onblur событие с ng-show="mainForm.Email.$invalid && mainForm.Email.$touched" to <p> tag

по умолчанию mainForm.Email.$touched и false, на размытие он изменится на true

для правильной настройки проверки <input> тип тега для электронной почты

вы можете добавить ng-keydown="mainForm.Email.$touched=false" если вы не хотите показывать сообщение об ошибке при редактировании входного тега

я не использовал угловую проверку.плагин JS

<div ng-app="PageModule" ng-controller="MainController" class="container"><br />
  <form method="post" name="mainForm" ng-submit="OnSubmit(mainForm)" >
    <label>Email: 
      <input type="email" name="Email" ng-keydown="mainForm.Email.$touched=false" ng-model="Email" class="email" />
    </label><br />
    <p class="alert alert-danger" ng-show="mainForm.Email.$invalid && mainForm.Email.$touched">Please correct any errors above before saving.</p>
    <button type="submit">Submit</button>
  </form>
</div>

обновленный код : JSFiddle

Проверка Формы AngularJs

дополнительная информация об угловой проверке

обновление 2

checkForm вернет, является ли форма действительной или недействительной

// added checForm, also adds valid and invalid to angular
form.checkForm = function (){
    var valid =  validator.form();

    angular.forEach(validator.successList, function(value, key) {
     scope.$parent[formName][value.name].$setValidity(value.name,true);
    });

    angular.forEach(validator.errorMap, function(value, key) {
      scope.$parent[formName][key].$setValidity(key,false);
    });

    return valid
}

чтобы скрыть сообщения по умолчанию, добавляемые плагином проверки jQuery, добавьте ниже фрагмент, чтобы $.validator.setDefaults

app.config(function ($validatorProvider) {
    $validatorProvider.setDefaults({
        errorPlacement: function(error,element) { // to hide default error messages
              return true;
           }
    });
});

вот модифицированный плагин выглядит как

(function (angular, $) {
angular.module('ngValidate', [])

    .directive('ngValidate', function () {
        return {
            require: 'form',
            restrict: 'A',
            scope: {
                ngValidate: '='
            },
            link: function (scope, element, attrs, form) {
                var validator = element.validate(scope.ngValidate);
                var formName = validator.currentForm.name;

                form.validate = function (options) {
                    var oldSettings = validator.settings;

                    validator.settings = $.extend(true, {}, validator.settings, options);

                    var valid = validator.form();

                    validator.settings = oldSettings; // Reset to old settings

                    return valid;
                };

                form.numberOfInvalids = function () {                           
                    return validator.numberOfInvalids();
                };

                // added checkForm
                form.checkForm = function (){
                    var valid =  validator.form();

                    angular.forEach(validator.successList, function(value, key) {
                     scope.$parent[formName][value.name].$setValidity(value.name,true);
                    });

                    angular.forEach(validator.errorMap, function(value, key) {
                      scope.$parent[formName][key].$setValidity(key,false);
                    });

                    return valid
                }
            }
        };
    })

    .provider('$validator', function () {
        $.validator.setDefaults({
            onsubmit: false // to prevent validating twice            
        });

        return {
            setDefaults: $.validator.setDefaults,
            addMethod: $.validator.addMethod,
            setDefaultMessages: function (messages) {
                angular.extend($.validator.messages, messages);
            },
            format: $.validator.format,
            $get: function () {
                return {};
            }
        };
    });
  }(angular, jQuery));

контроллер

app.controller("MainController", function($scope) {
$scope.Email = "";
$scope.url = "";
$scope.isFormInValid = false; // to hide validation messages
$scope.OnSubmit = function(form) {
    // here you can determine
    $scope.isFormInValid = !$scope.mainForm.checkForm(); 

     return false; 
 }
 })

нужно иметь на каждый тег input(например, по электронной почте)

ng-show="isFormInValid && !mainForm.Email.$invalid "

если форма и электронная почта являются недопустимыми, появляется сообщение проверки.

JSFiddle

попробуйте этот код для проверки-это форма

    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
    <div class="form-group">   
    <input  type="text"  ng-class="{ 'has-error' : userForm.name.$invalid &&    !userForm.name.$pristine }" ng-model="name" name="name" class="form-control" placeholder="{{ 'regName' | translate }}" required>
  <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">Your name is required.</p>

  </div>

<div class="form-group">
  <input  type="tel" ng-class="{ 'has-error' : userForm.mob.$invalid && !userForm.mob.$pristine }" ng-model="mob" class="form-control" name="mob" ng-maxlength="11" ng-minlength="11"  ng-pattern="/^\d+$/"  placeholder="{{ 'regPhone' | translate }}" required>
       <p ng-show="userForm.mob.$invalid && !userForm.mob.$pristine" class="help-block">Enter a valid number</p>

  </div>
  <div class="form-group">
  <input  type="email"  ng-model="email" name="email" class="form-control" placeholder="{{ 'regEmail' | translate }}"   required>

<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>

<div class="form-group">
  <input   type="password" ng-model="pass" name="pass"  class="form-control" placeholder="{{ 'regPass' | translate }}" minlength="6" maxlength="16" required>
  <p ng-show="userForm.pass.$invalid && !userForm.pass.$pristine" class="help-block"> Too short Min:6 Max:16</p>


  <input  type="password" ng-model="repass"  class="form-control" ng-minlength="6" placeholder="{{ 'regConPass' | translate }}" ng-maxlength="16" required>
  </div>
 <button class="loginbtntwo" type="submit" id="regbtn2"  ng-disabled="userForm.$dirty && userForm.$invalid" translate="signUp" ></button>
  </form>

вам нужно будет немного изменить плагин Angular Validate. Вот рабочая версия кода JSFiddle. Обратите внимание на обновленный код плагина, а также пару изменений в оригинальный код.

обновленный код, плагин просто добавляет Это в валидатор.Параметр SetDefaults:

errorPlacement: function(error,element) { return true; } // to hide default error message

затем мы используем переменную области, чтобы скрыть / показать пользовательское сообщение об ошибке:

$scope.OnSubmit = function(form) {
if (form.$dirty) {
    if (form.validate()) {
    //form submittal code
    } else {
    $scope.FormInvalid = true;
  }
}