有一个简单的方法来改变默认的错误值在jQuery验证插件?
我只是想重写错误消息，以使我的应用程序更加个性化——我有很多字段，所以我不想为字段x单独设置消息……我知道我能做到!
当前回答
您可以在验证调用中指定自己的消息。从验证插件文档(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
其他回答
@Josh:你可以从你的资源包中翻译消息来扩展你的解决方案
<script type="text/javascript">
$.validator.messages.number = '@Html.Raw(@Resources.General.ErrorMessageNotANumber)';
</script>
如果你把这段代码放到你的_Layout中。cshtml (MVC)，它可用于所有视图
jQuery表单验证自定义错误消息-tutsmake
Demo
$(document).ready(function(){ $("#registration").validate({ // Specify validation rules rules: { firstname: "required", lastname: "required", email: { required: true, email: true }, phone: { required: true, digits: true, minlength: 10, maxlength: 10, }, password: { required: true, minlength: 5, } }, messages: { firstname: { required: "Please enter first name", }, lastname: { required: "Please enter last name", }, phone: { required: "Please enter phone number", digits: "Please enter valid phone number", minlength: "Phone number field accept only 10 digits", maxlength: "Phone number field accept only 10 digits", }, email: { required: "Please enter email address", email: "Please enter a valid email address.", }, }, }); }); <!DOCTYPE html> <html> <head> <title>jQuery Form Validation Using validator()</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script> <style> .error{ color: red; } label, input, button { border: 0; margin-bottom: 3px; display: block; width: 100%; } .common_box_body { padding: 15px; border: 12px solid #28BAA2; border-color: #28BAA2; border-radius: 15px; margin-top: 10px; background: #d4edda; } </style> </head> <body> <div class="common_box_body test"> <h2>Registration</h2> <form action="#" name="registration" id="registration"> <label for="firstname">First Name</label> <input type="text" name="firstname" id="firstname" placeholder="John"><br> <label for="lastname">Last Name</label> <input type="text" name="lastname" id="lastname" placeholder="Doe"><br> <label for="phone">Phone</label> <input type="text" name="phone" id="phone" placeholder="8889988899"><br> <label for="email">Email</label> <input type="email" name="email" id="email" placeholder="john@doe.com"><br> <label for="password">Password</label> <input type="password" name="password" id="password" placeholder=""><br> <input name="submit" type="submit" id="submit" class="submit" value="Submit"> </form> </div> </body> </html>
将此代码添加到验证插件后包含的单独文件/脚本中，以覆盖消息，随意编辑:)
jQuery.extend(jQuery.validator.messages, {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
而不是改变插件源代码，你可以包括一个额外的js文件，格式类似于下载本地化文件夹中的那些，并在加载validation.js后包括那个文件
jQuery.extend(jQuery.validator.messages, {
required: ...,
maxlength: jQuery.validator.format(...),
...
});
$(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;
}
});
});
推荐文章
- HTML5文本区域占位符不出现
- 我如何捕捉Ajax查询后错误?
- jQuery:什么是限制“数字”仅输入文本框的最佳方法?(允许使用小数点)
- 在window.setTimeout()发生之前取消/终止
- 检测当用户滚动到底部的div与jQuery
- 检测视口方向，如果方向是纵向显示警告消息通知用户的指示
- 禁用从HTML页面中拖动图像
- Jquery停止子事件触发父事件
- 使函数等待元素存在
- 我如何从一个URL获得片段标识符(哈希#后的值)?
- 将JS对象转换为表单数据
- 多模态叠加
- 如何从函数中禁用jQuery对话框中的按钮?
- 如何检查jQuery插件是否已加载?
- 与evt.preventDefault()相反的是什么?
