javascript - 简单的正则表达式在 JQuery 的 anidate if/else 循环中不起作用

Question

我正在做一个简单的表单验证，发现正则表达式有问题，问题是一个正则表达式第一次使用时工作正常，但在循环中第二次返回 false，所有循环都工作正常除了这个，它是它上面那一个的复制品。这是代码:

if(!number.test(number1)){
   $("#mensaje_numero").fadeIn(); 
   $("#bocado_num").fadeIn();
   return false;
}else{
   $("#mensaje_numero").fadeOut();
   $("#bocado_num").fadeOut();
   if(!number.test(number2)){
       $("#mensaje_numero_2").fadeIn();
       $("#bocado_num2").fadeIn();
       return false;
   }else{
       $("#mensaje_numero_2").fadeOut();
        $("#bocado_num2").fadeOut();
        }
   }

第二次我在 $numer2 上使用数字正则表达式，结果不匹配，即使 $number2 是一个数字，即使 y 切换 $number2 和 $number1，即使我在同一个变量上运行脚本这两次，正则表达式第一次匹配数字，但第二次则不匹配。

这是整个脚本:

    <script>
    //match email address
    var emailRegex = new RegExp("^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$","gi"); 
    //expresion regular para admision solo numerica
    var number = new RegExp("[0-9]","gi");
    //Expresion regular para fecha en formato: dd/mm/aaaa
    var dateDDMMYYYRegex = new RegExp("^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$","gi");
   //Expresion regular para detectar codigo malicioso
    var whtml = new RegExp("/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/","gi");


    $(document).ready(function(){
       $("#enviar").click(function(){
           var nombre = $("#nombre").val();
           var mail = $("#email").val();
           var entrada = $("#entrada").val();
           var salida = $("#salida").val();
           var hab = $("#habitaciones").val();
           var pers = $("#personas").val();
           var obs = $("#obs").val();

           if(nombre == ""){
               $("#mensaje_nombre").fadeIn();
               $("#bocado_n").fadeIn();
               return false;
           }else{
                $("#mensaje_nombre").fadeOut();
                $("#bocado_n").fadeOut();
                if(mail == ""){
                    $("#mensaje_mail").fadeIn();
                    $("#bocado_m").fadeIn();
                    return false;
                }else{
                    $("#mensaje_mail").fadeOut();
                    $("#bocado_m").fadeOut();
                    if(entrada == ''){
                        $("#mensaje_fecha").fadeIn();
                        $("#bocado_f").fadeIn();
                        return false;
                    }else{
                        $("#mensaje_fecha").fadeOut();
                        $("#bocado_f").fadeOut();
                        if(salida == ''){
                            $("#mensaje_fecha_2").fadeIn();
                            $("#bocado_f2").fadeIn();
                            return false;
                        }else{
                            $("#mensaje_fecha_2").fadeOut();
                            $("#bocado_f2").fadeOut();
                            if(!number.test(hab)){
                                $("#mensaje_numero").fadeIn(); 
                                $("#bocado_num").fadeIn();
                                return false;
                            }else{
                                $("#mensaje_numero").fadeOut();
                                $("#bocado_num").fadeOut();
                                if(!number.test(pers)){
                                    alert("pers:"+pers+"-"+!number.test(pers)+"-"+!number.test(hab)+"-hab:"+hab);
                                    $("#mensaje_numero_2").fadeIn();
                                    $("#bocado_num2").fadeIn();
                                    return false;
                                }else{
                                    $("#mensaje_numero_2").fadeOut();
                                    $("#bocado_num2").fadeOut();
                                    if(!whtml.test(obs)){
                                        $("#mensaje_html").fadeIn();
                                        $("#bocado_h").fadeIn();
                                        return false;
                                    }else{
                                        $("#mensaje_html").fadeOut();
                                        $("#bocado_h").fadeOut();
                                    }

                                }

                            }
                        }

                    }
                }
           }
       }); 
    });


</script>

这是 HTML 代码:

<form method="post" action="#" name="form" enctype="multipart/form-data"  class="formulario">
    <div class="campos_up">
    <div class="campo">
    <p><?echo $textos['nombre']?> <span style="color:#f7cacb;">*</span></p>
    <input type="Text" name="nombre" id="nombre" value="" maxlength="65" style="width:125px;">
    <div id="mensaje_nombre" class="error">Por favor, ingresa tu nombre.</div>
    <div id="bocado_n" class="bocado_top"></div>
    </div>
    <div class="campo">
    <p><?echo $textos['tlf']?></p>
    <input type="Text" name="telefono" id="tlf" value="" maxlength="65" style="width:125px;" >
    </div>
    <div class="campo">
    <p><?echo $textos['mail']?> <span style="color:#f7cacb;">*</span></p>
    <input type="Text" name="mail" id="email" value="" maxlength="65" style="width:270px;">
    <div id="mensaje_mail" class="error">Por favor, ingresa una direccion de correo valida.</div>
    <div id="bocado_m" class="bocado_top"></div>
    </div>
    </div>
    <div class="campos_izq">
    <div class="campo">
    <p><?echo $textos['entrada']?><span style="color:#f7cacb;">*</span></p>
    <input type="Text" name="entrada" class="datepicker" value="" id="entrada" maxlength="65" style="width:97px;">
    <div id="mensaje_fecha" class="error">Por favor, introduce la fecha en el formato: "dd/mm/aa"</div>
    <div id="bocado_f" class="bocado_top"></div>
    </div>
    <div class="campo">
    <p><?echo $textos['salida']?><span style="color:#f7cacb;">*</span></p>
    <input type="Text" name="salida" class="datepicker" value="" id="salida" maxlength="65" style="width:97px; ">
    <div id="mensaje_fecha_2" class="error">Por favor, introduce la fecha en el formato: "dd/mm/aa"</div>
    <div id="bocado_f2" class="bocado_top"></div>
    </div>
    <div class="campo">
    <p><?echo $textos['num_hab']?><span style="color:#f7cacb;">*</span></p>
    <input type="text" name="habitaciones" id="habitaciones" value="" maxlength="65" style="width:125px;">
    <div id="mensaje_numero" class="error">Por favor, introduce un número</div>
    <div id="bocado_num" class="bocado_top"></div>
    </div>
    <div class="campo">
    <p><?echo $textos['num_pax']?><span style="color:#f7cacb;">*</span></p>
    <input type="text" name="personas" id="personas" value="" maxlength="65" style="width:125px;">
    <div id="mensaje_numero_2" class="error">Por favor, introduce un número</div>
    <div id="bocado_num2" class="bocado_top"></div>
    </div>
    </div>   
    <div class="campo">
    <p style="margin-left:0px;"><?echo $textos['obs']?></p>
    <textarea  style="width:270px; height:70px; resize:none;" name="observaciones" id="obs" maxlength="500"></textarea>
    <div id="mensaje_html" class="error">Lo sentimos, pero no se pueden introducir caracteres HTML en el contenido de este cuadro de texto.</div>
    <div id="bocado_h" class="bocado_top"></div>
    </div>

    <div class="botones_envio">
    <INPUT NAME="boton" TYPE="submit" id="enviar" VALUE="<?echo $textos['env']?>">
    <INPUT NAME="boton" TYPE="reset" VALUE="<?echo $textos['borrar']?>">
    </div>

</form>

Answer 1

两个问题:

1) 通过使用字符串文字来构建正则表达式，您会丢失一些转义。使用regex literal相反。

2) 调用 test 函数时切勿使用 g 标志。只需将其从正则表达式中删除即可。此标志将正则表达式转换为迭代器，因此下次调用时会出现不同的行为。

改变

new RegExp("/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/","gi")

至

/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/i