jQuery validate插件:添加自定义验证器以仅接受字母吗? [英] jQuery validate plugin : adding a custom validator to accept letters only?

问题描述

这是一个很久以前提出的问题: jQuery validate plugin:仅接受字母吗?

This was a question posed some time back: jQuery validate plugin : accept letters only?

我正在使用 http://bassis.de/jquery-plugins/jquery-plugin-validation/

我要寻找的是一种使我的某些表单字段仅接受字母，没有数字，特殊字符等的方法...

What i'm trying to find is a way to make some of my form fields accept letters only, no numbers, special chars etc...

问题的回答如下:

只需​​添加一个自定义验证器，然后像这样使用它:"

"Simply add a custom validator, and use it like this:"

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

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

但是，我似乎无法应用该解决方案.

However, I can not seem to apply the solution.

下面是我的代码，所以请告诉我如何进行更改.

Below is my code, so please tell me how to make the changes.

<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>

推荐答案

下面假设您只希望fname为字母.

Below is assuming that you want only fname to be alphabetic.

搜索ALPHA_REGEX以查看我在代码中添加了哪些部分.

search for ALPHA_REGEX to see where I added parts to your code.

而且，lname: "required",行是错字吗?我真的不知道是否需要lname: {"required":true},.

Also, is the lname: "required", line a typo? I really don't know if it needs to be lname: {"required":true}, or not.

<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);
    });
});

这篇关于jQuery validate插件:添加自定义验证器以仅接受字母吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！