jQuery驗證插件：添加自定義驗證器只接受字母？

Question

這是一個問題，提出了一些時間回：jQuery validate plugin : accept letters only?

我使用驗證插件從http://bassistance.de/jquery-plugins/jquery-plugin-validation/

什麼，我試圖找到一個辦法讓我的一些表單字段只接受字母，沒有數字，特殊字符等..

的問題得到的回答是這樣的：

「只需添加自定義驗證，並使用它是這樣的：」

jQuery.validator.addMethod("accept", function(value, element, param) { return value.match(new RegExp("^" + param + "$")); }); 

    rules: { 
    field: { accept: "[a-zA-Z]+" } 
} 

但是，我似乎無法應用該解決方案。

以下是我的代碼，所以請告訴我如何進行更改。

<SCRIPT TYPE="text/javascript"> 
$.validator.setDefaults({ 
    submitHandler: function(form) { form.submit(); } 
}); 

$().ready(function() { 

    // validate signup form on keyup and submit 
    $("#signUp").validate({ 
     rules: { 
      fname: { 
       required: true, 
       minlength: 2 
       }, 
      lname: "required", 
     user1: { 
       required: true, 
       minlength: 4 

      }, 
      captcha: { 

       required: true, 
       minlength: 2 
      }, 
      confirm_captcha: { 
       required: true, 
       equalTo: "#captcha" 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      confirm_email: { 
       required: true, 
       equalTo: "#email" 
      }, 
      topic: { 
       required: "#newsletter:checked", 
       minlength: 2 
      }, 
      agree: "required" 
     }, 
     messages: { 
      fname: { 
       required: " Please enter your first name", 
       minlength: " Your name must consist of at least 3 characters" 
      }, 
      lname: " Please enter your last name", 
      user1: { 
       required: " Please enter a username", 
       minlength: " Username must consist of at least 4 characters" 
      }, 

      confirm_captcha: { 
       required: " Anti-SPAM required", 
       equalTo: " Please solve the anti-SPAM equation correctly" 
      }, 
      confirm_email: { 
       required: " Please confirm your email", 
       equalTo: " Please enter the same email as above" 
      }, 
      email: " Please enter a valid email address", 

      agree: " Please accept our policy" 
     } 
    }); 

    // propose username by combining first- and lastname 
    $("#user1").focus(function() { 
     var fname = $("#fname").val(); 
     var lname = $("#lname").val(); 
     if(fname && lname && !this.value) { 
      this.value = fname + "." + lname; 
     } 
    }); 

    // check if confirm email is still valid after password changed 
    $("#email").blur(function() { 
     $("#confirm_email").valid(); 
    }); 

    // check if confirm captcha is still valid after password changed 
    $("#captcha").blur(function() { 
     $("#confirm_captcha").valid(); 
    }); 

    //code to hide topic selection, disable for demo 
    var newsletter = $("#newsletter"); 
    // newsletter topics are optional, hide at first 
    var inital = newsletter.is(":checked"); 
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); 
    var topicInputs = topics.find("input").attr("disabled", !inital); 
    // show when newsletter is checked 
    newsletter.click(function() { 
     topics[this.checked ? "removeClass" : "addClass"]("gray"); 
     topicInputs.attr("disabled", !this.checked); 
    }); 
}); 
</SCRIPT> 

Answer 1

下面假設您只想要fname爲字母。

搜索ALPHA_REGEX以查看我的代碼中添加了哪些部分。

另外，是lname: "required",行一個錯字？我真的不知道它是否需要lname: {"required":true},。

<SCRIPT TYPE="text/javascript"> 

$.validator.setDefaults({ submitHandler: function(form) { form.submit(); } }); 

jQuery.validator.addMethod("regex", function(value, element, param) { return value.match(new RegExp("^" + param + "$")); }); 
var ALPHA_REGEX = "[a-zA-Z]*"; 

$().ready(function() { 
    // validate signup form on keyup and submit 
    $("#signUp").validate({ 
     rules: { 
      fname: { 
       regex: ALPHA_REGEX, 
       required: true, 
       minlength: 2 
       }, 
      lname: "required", 
      user1: { 
       required: true, 
       minlength: 4 

      }, 
      captcha: { 

       required: true, 
       minlength: 2 
      }, 
      confirm_captcha: { 
       required: true, 
       equalTo: "#captcha" 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      confirm_email: { 
       required: true, 
       equalTo: "#email" 
      }, 
      topic: { 
       required: "#newsletter:checked", 
       minlength: 2 
      }, 
      agree: "required" 
     }, 
     messages: { 
      fname: { 
       required: " Please enter your first name", 
       minlength: " Your name must consist of at least 3 characters" 
      }, 
      lname: " Please enter your last name", 
      user1: { 
       required: " Please enter a username", 
       minlength: " Username must consist of at least 4 characters" 
      }, 

      confirm_captcha: { 
       required: " Anti-SPAM required", 
       equalTo: " Please solve the anti-SPAM equation correctly" 
      }, 
      confirm_email: { 
       required: " Please confirm your email", 
       equalTo: " Please enter the same email as above" 
      }, 
      email: " Please enter a valid email address", 

      agree: " Please accept our policy" 
     } 
    }); 

    // propose username by combining first- and lastname 
    $("#user1").focus(function() { 
     var fname = $("#fname").val(); 
     var lname = $("#lname").val(); 
     if(fname && lname && !this.value) { 
      this.value = fname + "." + lname; 
     } 
    }); 

    // check if confirm email is still valid after password changed 
    $("#email").blur(function() { 
     $("#confirm_email").valid(); 
    }); 

    // check if confirm captcha is still valid after password changed 
    $("#captcha").blur(function() { 
     $("#confirm_captcha").valid(); 
    }); 

    //code to hide topic selection, disable for demo 
    var newsletter = $("#newsletter"); 
    // newsletter topics are optional, hide at first 
    var inital = newsletter.is(":checked"); 
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); 
    var topicInputs = topics.find("input").attr("disabled", !inital); 
    // show when newsletter is checked 
    newsletter.click(function() { 
     topics[this.checked ? "removeClass" : "addClass"]("gray"); 
     topicInputs.attr("disabled", !this.checked); 
    }); 
});