jQuery验证添加了自定义方法和错误消息的插件

Question

以下是链接到JSFIDDLE。

你好

我正在学习JQuery验证器插件及其API。我几乎在那里，但似乎找不到我喜欢实施的解决方案的坚实范例。我做了很多在线搜索，发现了点点滴滴，但没有任何解释得很好。

我有一个简单的形式与这些领域：

• 名
• 姓
• 电子邮件
• 电话

目前，这些领域正在没有验证任何自定义方法或错误消息。所以如果表单提交时会弹出“required *”为空的字段。

我想要做的就是验证一个字段，而不仅仅是检查它是否为空/空。因此，例如有：

名字：

1. 字段不为空/空
2. 字段不包含字母数字字符

电话：

1. 场不空白/空
2. 字段只包含数字c haracters

我是非常新的实现自定义验证方法，我不知道如何显示正确的错误消息根据。所以如果手机领域不是空白，但容器非数字字符，我想标记它，并显示错误消息，该字段只接受数字字符。

目前，我在验证器的消息对象中出现错误消息“required *”，我不知道如何在粒度级别实现错误消息。

对于这样漫长的解释，我表示歉意。如果有人能指引我走向正确的方向，我将非常感激。谢谢

这是链接到JSFIDDLE。

<div class="wrapper"> 

     <form id="contactForm" action="" method="post" enctype="multipart/form-data"> 
      <div class="fieldGroup"> 
      <!-- FIRST NAME --->  
       <lable for="firstname">First Name: </label> 
       <input type="text" id="firstname" name="firstname" size="25" maxlength="25" > 
      </div> 
      <!-- LAST NAME --> 
      <div class="fieldGroup"> 
       <lable for="lastname">Last Name: </label> 
       <input type="text" id="lastname" name="lastname" size="25" maxlength="25" > 
      </div> 
      <!-- EMAIL -->  
      <div class="fieldGroup"> 
       <lable for="email">Email: </label> 
       <input type="text" id="email" name="email" size="25" maxlength="40" >  
      </div> 
      <!-- PHONE -->  
      <div class="fieldGroup"> 
       <lable for="lastname">Phone: </label> 
       <input type="text" id="phone" name="phone" size="12" maxlength="12" > 
       xxx-xxx-xxxx 
      </div>   

      <div class="fieldGroup"> 
       <input type="submit" id="SubmitBtn" value="Submit" > 
       <input type="reset" id="ResettBtn" value="Reset" >     
      </div>    

     </form> 

    </div> 

JAVASCRIPT

(function($,W,D) 
    { 
     var JQUERY4U = {}; 

     JQUERY4U.UTIL = 
     { 
      setupFormValidation: function() 
      { 
       //form validation rules 
       $("#contactForm").validate({ 
        rules: { 
         firstname: { 
          required: true, 
          chkData: true 
         }, 
         lastname: { 
          required: true, 
          minlength: 2, 
          maxlength: 15    
         }, 
         address1:{ 
          required: true, 
          minlength: 8, 
          maxlength: 30    
         }, 
         city:{ 
          required: true, 
          minlength: 8, 
          maxlength: 25   
         },     
         state:{ 
          required: true   
         }, 
         zipcode:{ 
          required: true, 
          minlength: 5, 
          maxlength: 10 
         }, 
         phone: { 
          required: true, 
          minlength: 10, 
          maxlength: 12      
         }, 
         email: 
         { 
          required: true, 
          email: true 
         }     
        }, 
        messages: { 
         firstname: "required *", 
         lastname: "required *", 
         address1: "required *", 
         city: "required *", 
         state: "required *", 
         zipcode: "required *", 
         phone: "required *", 
         email: "required *", 
        }, 
        submitHandler: function(form) { 
         form.submit(); 
        } 
       }); 
      } 


     } 

     //when the dom has loaded setup form validation rules 
     $(D).ready(function($) { 

       $.validator.addMethod("chkData", 
       function(value, element){ 
        alert(value); 
       },"SORRY"); 
      JQUERY4U.UTIL.setupFormValidation(); 
     }); 

    })(jQuery, window, document); 

Answer 1

你的代码稍微复杂得多，它需要的是。

$(document).ready(function() { 

    $("#contactForm").validate({ 
     rules: { 
      firstname: { 
       required: true, 
       alphanumeric: true 
      }, 
      lastname: { 
       required: true, 
       minlength: 2, 
       maxlength: 15 
      }, 
      address1: { 
       required: true, 
       minlength: 8, 
       maxlength: 30 
      }, 
      city: { 
       required: true, 
       minlength: 8, 
       maxlength: 25 
      }, 
      state: { 
       required: true 
      }, 
      zipcode: { 
       required: true, 
       minlength: 5, 
       maxlength: 10 
      }, 
      phone: { 
       required: true, 
       phoneUS: true 
      }, 
      email: { 
       required: true, 
       email: true 
      } 
     }, 
     messages: { 
      firstname: { 
       required: "required *", 
       alphanumeric: "custom alphanumeric message" 
      }, 
      lastname: "required *", 
      address1: "required *", 
      city: "required *", 
      state: "required *", 
      zipcode: "required *", 
      phone: "required *", 
      email: "required *", 
     } 
    }); 

}); 

DEMO：http://jsfiddle.net/7uDXQ/

NOTES：

1）alphanumeric和phoneUS规则要求列入additional-methods.js file的。

2）

“目前，我对验证程序的messages 对象中的错误消息required *和，我不知道如何实现对错误粒度级别 的消息。”

自定义消息只是按照相似的格式来实现你的rules:：

messages: { 
    firstname: { 
     required: "custom required *", 
     alphanumeric: "custom alphanumeric message" 
    }, 
} 

否则，如果只做到这一点...

messages: { 
    firstname: "custom required *", 
} 

然后所有的消息全部规则firstname字段将共享相同的自定义消息。

3）您不必指定submitHandler回调函数，除非你需要做一些有效的形式，如ajax。否则，默认情况下，表单只会在有效表单上执行正常的submit。将我的jsFiddle中的代码与我上面发布的代码进行比较。

4）没有像chkData这样的规则，所以我删除了它。如果这是您的自定义规则，请按照上述第2项应用您的自定义消息。