条件检查时如何一次停止执行if语句？答案

【问题标题】：How to stop the execution of if statement at one time, when condtiion check?条件检查时如何一次停止执行if语句？
【发布时间】：2018-05-08 01:57:50
【问题描述】：

我在 angularjs 中有用于表单验证的自定义指令，在此 if 条件工作正常，但条件执行多次，如何停止电子邮件和数字的 if 条件，仅检查一次。谁能帮我解决这个问题？

这是我的验证指令.js，

app.directive("formValidate", function() {
  return {
    require: 'ngModel',
    template: '<p>Please Fill this Field</p>',
    //scope: true,
    link: function(scope, elem, attr) {

        scope.$watch(attr['ngModel'], function(value) {

                var NameValidator = angular.element("<p class='NameError'>This field is required!</p>");
                var EmailValidator = angular.element("<p class='EmailError'>This Email is Invalid!</p>");
                var PhoneValidator = angular.element("<p class='PhoneError'>Enter Number Only</p>");

                if (attr['name'] == "name") {
                    if (((value || '').toString()).length == 0) {

                        NameValidator.insertAfter(elem);
                        return;


                    } else {
                        var nameRemove = elem[0].nextSibling;
                        nameRemove.remove();

                    }
                }


                if (attr['name'] == 'email') {


                    if (!(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/.test(value))) {
                        console.log('1:', value);
                        EmailValidator.insertAfter(elem);
                        return;

                    } else {
                        console.log('2:', value);

                        var emailRemove = elem[0].nextSibling;
                        emailRemove.remove();

                    }
                }
                if (attr['name'] == 'number') {
                    if (!(/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test(value))) {
                        PhoneValidator.insertAfter(elem);
                        return;

                    } else {
                        var phoneRemove = elem[0].nextSibling;
                        phoneRemove.remove();

                    }
                }
            })

    }
}
 });

【问题讨论】：

这看起来是一个 XY 问题。这里的情况是显示多个验证消息吗？
不，如果条件匹配，我想一次性添加电子邮件错误，我不想在输入每个字母时执行它
else { var emailRemove = elem[0].nextSibling; emailRemove.remove();返回假； }，像这样？

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

你可以使用return false；停止执行

return false;

【讨论】：

我想在哪里使用它？
你可以在else部分应用这个，如果电子邮件和号码的验证没有完成，那么在else部分你可以返回false来停止执行。
else { var emailRemove = elem[0].nextSibling; emailRemove.remove();返回假； }，像这样？
是的，你可以使用或者你也可以使用下面的 return 语句来停止执行 return undefined;返回假；返回真；返回“一些字符串”；返回 12345;
请你看看我下面的答案，它工作正常，但错误元素隐藏，它不会删除

【解决方案2】：

将监视函数提取到函数声明中并使用名称代替，例如scope.$watch(attr['ngModel'], namedFn).

去抖这个命名函数。您可以在UnderscoreJS 中使用去抖动功能。这将确保在观察到的更改停止到达后调用命名函数。

scope.$watch(attr['ngModel'], _.debounce(namedFn, 300));

【讨论】：

【解决方案3】：

它工作正常，但元素没有删除，它只是隐藏，

      app.directive("formValidate", function() {
return {
    require: 'ngModel',
    template: '<p>Please Fill this Field</p>',
    //scope: true,
    link: function(scope, elem, attr) {

        scope.$watch(attr['ngModel'], function(value) {

                var NameValidator = angular.element("<p class='NameError'>This field is required!</p>");
                var EmailValidator = angular.element("<p class='EmailError'>This Email is Invalid!</p>");
                var PhoneValidator = angular.element("<p class='PhoneError'>Enter Number Only</p>");

                if (attr['name'] == "name") {
                    if (((value || '').toString()).length == 0) {

                        NameValidator.insertAfter(elem);
                        return;


                    } else {
                        var nameRemove = elem[0].nextSibling;
                        nameRemove.remove();

                    }
                }


                if (attr['name'] == 'email') {

                    if (!(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/.test(value))) {
                        if (!scope.emailRemove) {
                            EmailValidator.insertAfter(elem);
                            scope.emailRemove = elem[0].nextSibling;
                        }
                    } else {
                        scope.emailRemove.remove();
                    }
                }
                if (attr['name'] == 'number') {
                    if (!(/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test(value))) {
                        if (!scope.phoneRemove) {
                            PhoneValidator.insertAfter(elem);
                            scope.phoneRemove = elem[0].nextSibling;
                        }

                    } else {

                        scope.phoneRemove.remove();

                    }
                }
            })
            // var select = angular.element("<p>Name is Required</p>");
            // elem.append(select);
            // if (attr.name === "name") {  
            //     elem.bind('blur', function() {
            //         scope.$apply(function() {
            //             elem.replaceWith(select);
            //         })
            //     })
            // }
    }
}
});

【讨论】：