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

Posted 2023-05-09

【中文标题】条件检查时如何一次停止执行if语句？

【英文标题】：How to stop the execution of if statement at one time, when condtiion check?

【发布时间】：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();返回假； ，像这样？

【参考方案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);
            //         )
            //     )
            // 
    

);