$(function() {

$("#username_error_message").hide();
$("#password_error_message").hide();
$("#retype_password_error_message").hide();
$("#email_error_message").hide();

var error_username = false;
var error_password = false;
var error_retype_password = false;
var error_email = false;

$("#form_username").focusout(function() {

    check_username();
    
});

$("#form_password").focusout(function() {

    check_password();
    
});

$("#form_retype_password").focusout(function() {

    check_retype_password();
    
});

$("#form_email").focusout(function() {

    check_email();
    
});

function check_username() {

    var username_length = $("#form_username").val().length;
    
    if(username_length < 5 || username_length > 20) {
        $("#username_error_message").html("Should be between 5-20 characters");
        $("#username_error_message").show();
        error_username = true;
    } else {
        $("#username_error_message").hide();
    }

}

function check_password() {

    var password_length = $("#form_password").val().length;
    
    if(password_length < 8) {
        $("#password_error_message").html("At least 8 characters");
        $("#password_error_message").show();
        error_password = true;
    } else {
        $("#password_error_message").hide();
    }

}

function check_retype_password() {

    var password = $("#form_password").val();
    var retype_password = $("#form_retype_password").val();
    
    if(password !=  retype_password) {
        $("#retype_password_error_message").html("Passwords don't match");
        $("#retype_password_error_message").show();
        error_retype_password = true;
    } else {
        $("#retype_password_error_message").hide();
    }

}

function check_email() {

    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);

    if(pattern.test($("#form_email").val())) {
        $("#email_error_message").hide();
    } else {
        $("#email_error_message").html("Invalid email address");
        $("#email_error_message").show();
        error_email = true;
    }

}

$("#registration_form").submit(function() {
                                        
    error_username = false;
    error_password = false;
    error_retype_password = false;
    error_email = false;
                                        
    check_username();
    check_password();
    check_retype_password();
    check_email();
    
    if(error_username == false && error_password == false && error_retype_password == false && error_email == false) {
        return true;
    } else {
        return false;   
    }

});

});

删除所有默认错误消息

$.validator.messages.required = "";

另一种可能的解决方案是遍历字段，向每个字段添加相同的错误消息。

$('.required').each(function(index) {
  $(this).rules("add", {
    messages: {
      required: "Custom error message."
   }
  });
});

因为我们已经使用了JQuery，我们可以让页面设计者在标记中添加自定义消息，而不是代码:

<input ... data-msg-required="my message" ...

或者，更通用的解决方案是在所有字段上使用一个简短的data-msg属性:

<form id="form1">
    <input type="text" id="firstName" name="firstName" 
        data-msg="Please enter your first name" />
    <br />
    <input type="text" id="lastName" name="lastName" 
        data-msg="Please enter your last name" />
    <br />
    <input type="submit" />
</form>

然后代码包含如下内容:

function getMsg(selector) {
    return $(selector).attr('data-msg');
}

$('#form1').validate({
    // ...
    messages: {
        firstName: getMsg('#firstName'),
        lastName: getMsg('#lastName')
    }
    // ...
});

您可以在验证调用中指定自己的消息。从验证插件文档(http://jquery.bassistance.de/validate/demo/milk/)中使用的Remember the Milk注册表单中提升和缩写这段代码，您可以轻松地指定自己的消息:

var validator = $("#signupform").validate({
    rules: {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            minlength: 2,
            remote: "users.php"
        }
    },
    messages: {
        firstname: "Enter your firstname",
        lastname: "Enter your lastname",
        username: {
            required: "Enter a username",
            minlength: jQuery.format("Enter at least {0} characters"),
            remote: jQuery.format("{0} is already in use")
        }
    }
});

验证的完整API(…):http://jqueryvalidation.org/validate

这招对我很管用:

// Change default JQuery validation Messages.
$("#addnewcadidateform").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            email: "required email",
        },
        messages: {
            firstname: "Enter your First Name",
            lastname: "Enter your Last Name",
            email: {
                required: "Enter your Email",
                email: "Please enter a valid email address.",
            }
        }
    })