角定制验证唯一的电子邮件触发一次 [英] angular custom validation unique email trigger once

问题描述

我有很多麻烦，我不理解的行为

自定义的验证，或可能是我误解的东西。

该指令触发一次欧思特手表内无效，两次手表内（至少在我的测试）

我的目标是触发额外的自定义验证所需的后

和电子邮件规则是有效的，但它不工作在所有

所以，code

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML数据-NG-应用=对myApp＆GT;
    ＆LT; HEAD＆GT;
         ＆LT;间的charset =UTF-8＆GT;    ＆LT; /头＆GT;
    ＆LT;身体GT;
        ＆LT; D​​IV数据-NG-控制器=myCtrl＆GT;
            ＆LT;形成NOVALIDATE ID =FRM-注册NAME =addContestantFrm数据-NG-提交=addContestant（）＆GT;
                ＆LT; D​​IV＆GT;
                    ＆LT;标签=电子邮件＆GT;电子邮件：*＆LT; /标签＆gt;
                    ＆LT;输入类型=电子邮件ID =电子邮件NAME =电子邮件级=输入介质的tabindex =3称号=电子邮件MAXLENGTH =255值={{contestant.email}} 占位符=电子邮件数据-NG-模式=contestant.email需要电子邮件的独特/＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; D​​IV＆GT;
                    ＆LT;输入类型=提交ID =sbmtNAME =sbmt级=输入SBT数据-NG-禁用=$ addContestantFrm有效！VALUE =发送/＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; /表及GT;
        ＆LT; / DIV＆GT;
         ＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.10.1.min.js＆GT;＆下; /脚本＆GT;
        ＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.0.8/angular.min.js＆GT;＆下; /脚本＆GT;
        ＆LT;脚本＆GT;
            VAR应用= angular.module（'对myApp'，[]）;
            app.factory（'选手'，函数（$ HTTP）{
                返回{
                    checkUniqueEmail：功能（电子邮件）{
                        返回$ http.post（'./ checkemail.php'，{电子邮件：电子邮件}）;
                    }
                }
            }）;
            app.controller（'myCtrl'，函数（$范围）{            }）;
            app.directive（'emailUnique'，函数（参赛者）{
                返回{
                    要求：'ngModel'，
                    链接：功能（范围，元素，ATTRS，CTRL）{
                    Contestant.checkUniqueEmail（attrs.emailUnique）.success（功能（响应）{
                    CTRL $ setValidity（'emailUnique'，真）。
                    的console.log（'内有效'）;
                    的console.log（attrs.emailUnique）;
                    的console.log（'结尾内有效'）;
                    返回attrs.emailUnique;
                }）
                .error（功能（数据）{
                    的console.log（'内无效'）;
                    CTRL $ setValidity（'emailUnique'，虚假）。
                     的console.log（'里面到底无效'）;
                    返回不确定的;
                }）;               范围。$腕表（attrs.ngModel，函数（）{
                    的console.log（我看里面'）;
                    的console.log（CTRL $ error.required）;
                    的console.log（CTRL $ error.email）;
                    的console.log（'高端腕表'）;                }）;
                的console.log（'ouside'）;
                的console.log（attrs.emailUnique）;
                的console.log（'结束ouside'）;            }
        }
    }）;
        ＆LT; / SCRIPT＆GT;
    ＆LT; /身体GT;
＆LT; / HTML＆GT;
 

和假冒检查

 ＆LT; PHP
$数据=的file_get_contents（PHP：//输入）;
$数据= json_de code（$的数据，真实）;
如果（使用isset（$数据[电子邮件]））{
    如果（空（$数据[电子邮件]））{
        标题（HTTP / 1.0 404未找​​到）;
        出口;
    }
    ELSEIF（$数据[电子邮件]！=='[e-mail]'）{
        标题（HTTP / 1.0 404未找​​到）;
        出口;
    }
    其他{
        标题（HTTP / 1.1 200 OK）;
        返回$数据[电子邮件];
        出口;
    }
}
 

解决方案

从AngularJS文档：

  

$解析器：的功能阵列来执行，作为管道，每当
  控制从DOM中读取值。每个函数被调用，反过来，
  传递值到下一个。最后一个返回值被使用
  填充该模型。用于消毒/转换价值以及
  验证。 进行验证，分析程序应更新的有效性
  国家使用$ setValidity（），并返回undefined无效值

在此基础上，如果我们在管道的末尾添加$解析器（使用Ctrl键。$ parsers.push），那么，如果输入值无效，viewValue参数将是不确定的。

我写了这个例子来阐明分析器是如何工作的： http://jsfiddle.net/oua78v19/7/ （检查控制台查看参数值是如何改变时，它是有效的）

更新code样品：<​​/ P>

  app.directive（'emailUnique'，函数（参赛者）{
                返回{
                    要求：'ngModel'，
                    链接：功能（范围，元素，ATTRS，CTRL）{
                        Ctrl键。$ parsers.push（功能（viewValue）{
                            如果（viewValue）{
                                //我们有一个有效的电子邮件地址
                                //我们现在可以做一个Ajax调用，看看
                                //如果电子邮件已被使用
                            }
                        }）;
                    }
                }
 

I'm having a lot of troubles and I don't understand the behavior of

custom validation or may be I misunderstand something.

The directive trigger once ousite watch and inside invalid and twice inside watch (at least in my test)

My goal would be trigger the extra custom validation after the required

and email rules are valid but it doesn't work at all.

So the code

<!doctype html>
<html data-ng-app="myApp">
    <head>
         <meta charset="utf-8">

    </head>
    <body>
        <div data-ng-controller="myCtrl">
            <form novalidate id="frm-signup" name="addContestantFrm" data-ng-submit="addContestant()">
                <div>
                    <label for="email">Email: *</label>
                    <input type="email" id="email" name="email" class="input-medium" tabindex="3" title="email" maxlength="255" value="{{contestant.email}}" placeholder="email" data-ng-model="contestant.email" required email-unique />
                </div>
                <div>
                    <input type="submit" id="sbmt" name="sbmt" class="input-sbt" data-ng-disabled="!addContestantFrm.$valid" value="Send" />
                </div>
            </form>
        </div>
         <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.angularjs.org/1.0.8/angular.min.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.factory('Contestant',function($http){
                return {
                    checkUniqueEmail : function(email){
                        return $http.post('./checkemail.php',{email:email});
                    }
                }
            });
            app.controller('myCtrl',function($scope){

            });
            app.directive('emailUnique',function(Contestant) {
                return {
                    require: 'ngModel',
                    link: function(scope, element, attrs,ctrl) {
                    Contestant.checkUniqueEmail(attrs.emailUnique).success(function (response) {
                    ctrl.$setValidity('emailUnique', true);
                    console.log('inside valid');
                    console.log(attrs.emailUnique);
                    console.log('end inside valid');
                    return attrs.emailUnique;
                })
                .error(function (data) {
                    console.log('inside invalid');
                    ctrl.$setValidity('emailUnique', false);
                     console.log('end inside invalid');
                    return undefined;
                });

               scope.$watch(attrs.ngModel, function() {
                    console.log('I am inside watch');
                    console.log(ctrl.$error.required);
                    console.log(ctrl.$error.email);
                    console.log('end watch');

                });
                console.log('ouside');
                console.log(attrs.emailUnique);
                console.log('end ouside');

            }
        }
    });
        </script>
    </body>
</html>

and the fake check

<?php
$data = file_get_contents("php://input"); 
$data = json_decode($data,true);
if(isset($data['email'])){
    if(empty($data['email'])){
        header("HTTP/1.0 404 Not Found");
        exit;
    }
    elseif($data['email'] !== '[e-mail]'){
        header("HTTP/1.0 404 Not Found");
        exit;
    }
    else{
        header("HTTP/1.1 200 OK");
        return $data['email'];
        exit;
    }
}

解决方案

From AngularJS documentation:

$parsers: Array of functions to execute, as a pipeline, whenever the control reads value from the DOM. Each function is called, in turn, passing the value through to the next. The last return value is used to populate the model. Used to sanitize / convert the value as well as validation. For validation, the parsers should update the validity state using $setValidity(), and return undefined for invalid values.

Based on this, if we add the $parser at the end of the pipe (using ctrl.$parsers.push) then, if the input value is invalid, viewValue parameter will be undefined.

I wrote this example to clarify how parsers works: http://jsfiddle.net/oua78v19/7/ (check console to see how parameter value is changed when it is valid)

Updated code sample:

app.directive('emailUnique',function(Contestant) {
                return {
                    require: 'ngModel',
                    link: function(scope, element, attrs,ctrl) {
                        ctrl.$parsers.push(function(viewValue) {
                            if (viewValue) {
                                // we have a valid email address
                                // we can do now an ajax call to see 
                                // if email is already in use
                            }
                        });
                    }
                }

这篇关于角定制验证唯一的电子邮件触发一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！