使用jquery进行表单验证的行为不如预期

我正在使用jQuery来验证表单中的某些字段，并且似乎在特定字段（#inputTel）中存在问题。使用jquery进行表单验证的行为不如预期

如果输入的格式不正确，会在下面弹出一条错误消息，这很好，但问题是一旦输入正确的格式，消息不会消失。

这是一个jsFiddle与完整的演示。

这是有问题的部分：

//Tel Validate 
function is_valid_tel() { 
    $this = $("#inputTel"); 
    var pattern = new RegExp("^\d{11}$"); 
    if (pattern.test($this.val())) { // valid 
     if ($this.closest(".control-group").hasClass("error")) $this.closest(".control-group").removeClass("error"); 
     $this.siblings(".help-inline").css("display", "none"); 
     return true; 
    } else { // error 
     if (!$this.closest(".control-group").hasClass("error")) $this.closest(".control-group").addClass("error"); 
     $this.siblings(".help-inline").css("display", "block"); 
     return false; 
    } 
}

每隔领域工作正常，除了这一个。我的jQuery技能有限，所以我不确定如何解决这个问题。

来源

2013-02-12 Richlewis

我强烈建议使用jQuery [Validation plugin]（http://bassistance.de/jquery-plugins/jquery-plugin-validation/）。 – Hari 2013-02-12 09:29:01

我认为这是正确的错误，当我把一个10位数的东西，然后它也去错误部分 – 2013-02-12 09:31:56

它不是jQuery的，它的正则表达式这是搞东西 – 2013-02-12 09:37:20

问题在你的代码：

更换var pattern = new RegExp("^\d{11}$");与var pattern = new RegExp(/^\d{11}$/);

更新代码

//Tel Validate 
function is_valid_tel() { 
    $this = $("#inputTel"); 
    var pattern = new RegExp(/^\d{11}$/);// Update this line 
    if (pattern.test($this.val())) { // valid 
     if ($this.closest(".control-group").hasClass("error")) $this.closest(".control-group").removeClass("error"); 
     $this.siblings(".help-inline").css("display", "none"); 
     return true; 
    } else { // error 
     if (!$this.closest(".control-group").hasClass("error")) $this.closest(".control-group").addClass("error"); 
     $this.siblings(".help-inline").css("display", "block"); 
     return false; 
    } 
}

检查小提琴http://jsfiddle.net/rfg8H/

来源

2013-02-12 09:30:44

非常感谢您的帮助，赞赏.. – Richlewis 2013-02-12 10:56:49

也作为对正则表达式本身的修正，我注意到它已经被删除了引号，为什么需要删除？ – Richlewis 2013-02-12 11:03:40

您也可以使用类似下面，少cubersome：

$(function() { 
      function validateTheForm() { 
       var ok = true; 
       $(".input-medium").each(function() { 
       if($(this).val() == "") //use regex actually here 
       { 
        $(this).next().css("display","inline"); 
        ok = false; 
       } 
       else { 
        $(this).next().css("display","none"); 
       } 


      }); 
       return ok; 
      } 
      $(".btn").click(function() { 
       $("form").submit(validateTheForm()); 
       $("form").submit(); 

      }); 

     });

来源

2013-02-12 11:15:14 defau1t

使用jquery进行表单验证的行为不如预期

回答

相关问题