如何在 jQuery 验证中为消息添加验证规则？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14460925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add validation rules with messages in jQuery validation?
提问by Ejaz Karim
I've tried below code but can't get error messages.
我试过下面的代码，但无法收到错误消息。
var v = jQuery("#account_info").validate({
//errorLabelContainer: $("#result"),
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
target: "#checkOut_error",
success: function(msg) {
//setTimeout("window.location='MyBids.php'", 2000);
if(msg == '<?php echo OBJECT_STATUS_SUCCESS;?>') {
$('#checkOut_error').html('<div class="msg msg-thanks">Bid Submitted Successfully !</div>');
//setTimeout("window.location='"+<?php echo LINK_TO_TENBID;?>+"'", 2000);
//setTimeout("window.location.reload(true)",2000);
//$('.result').html('<div class="msg msg-thanks">Bid Submitted Successfully !</div>');
} else{
$("#checkOut_error").html(msg);
}
},
clearForm: false,
resetForm: false
});
},
errorLabelContainer: "#checkOut_error",
rules: {
phone_number: {
required: true
},
recipient_name: {
required: true,
min_length: 6
}
},
messages: {
recipient_name: {
required: "Enter recipient name",
min_length: "Name should be atleast 6 characters long"
}
}
});
-How to add rules and error messages?
- 如何添加规则和错误信息？
-Which attribute does validation plugin uses: name or id?
- 验证插件使用哪个属性：名称或 ID？
-How to show one error message at a time?
- 如何一次显示一条错误信息？
回答by Sparky
-Which attribute does validation plugin uses: name or id?
- 验证插件使用哪个属性：名称或 ID？
As per documentation, the plugin requires that all inputfields contain a nameattribute. When specifying the rulesand messagesinside .validate(), you would use the nameattribute.
根据文档，该插件要求所有input字段都包含一个nameattribute. 在指定rules和messagesinside 时.validate()，您将使用nameattribute.
-How to add rules and error messages?
- 如何添加规则和错误信息？
The min_lengthrule should notcontain an underscore. It's minlength. Otherwise, your code looked correct.
该min_length规则应该不包含下划线。它是minlength。否则，您的代码看起来是正确的。
Simple demo based on your code...
基于您的代码的简单演示...
jQuery:
jQuery：
$(document).ready(function () {
$("#account_info").validate({
rules: {
phone_number: {
required: true
},
recipient_name: {
required: true,
minlength: 6 // <-- removed underscore
}
},
messages: {
phone_number: {
required: "this field is required"
},
recipient_name: {
required: "Enter recipient name",
minlength: "Name should be at least {0} characters long" // <-- removed underscore
}
},
submitHandler: function (form) { // for demo
alert('valid form'); // for demo
return false; // for demo
}
});
});
HTML:
HTML：
<form id="account_info">
<input type="text" name="phone_number" />
<br/>
<input type="text" name="recipient_name" />
<br/>
<input type="submit" />
</form>
Working jsFiddle Demo: http://jsfiddle.net/rfgRL/
工作 jsFiddle 演示：http: //jsfiddle.net/rfgRL/
Also, when using a rule like minlength, your custom message can contain a placeholder, {0}, that inserts your specific rule definition.
此外，当使用诸如 之类的规则时minlength，您的自定义消息可以包含一个占位符{0}，用于插入您的特定规则定义。
minlength: 6
with a custom message...
带有自定义消息...
minlength: "Name should be at least {0} characters long"
will automatically display...
会自动显示...
Name should be at least 6 characters long
名称长度至少应为 6 个字符
Since you only call .validate()onceon DOM ready to only initialize the validation plugin with its options, there is no purpose in assigning it to a variable; it's not being re-used anywhere... at least it shouldn't be.
由于您只在 DOM 上调用.validate()一次准备好仅使用其选项初始化验证插件，因此将其分配给变量是没有意义的；它不会在任何地方重复使用......至少它不应该。
var v = jQuery("#account_info").validate({...});
Would simply be this...
简直就是这个……
jQuery("#account_info").validate({...});
Elsewhere in your code, if you needed to test the formfor validity or re-trigger a validity test, use the .valid()method. It will both return a boolean and trigger display of any pending form errors. Example:
在代码的其他地方，如果您需要测试form有效性或重新触发有效性测试，请使用.valid()方法。它将返回一个布尔值并触发任何未决表单错误的显示。例子：
if (jQuery("#account_info").valid()) { ...
回答by Suresh Atta
here is a simple jquery registration(signup) validator :
这是一个简单的 jquery 注册（注册）验证器：
$('#submitButton').click(function() {
$("#accounterForm").validate({
rules: {
firstName: "required",
lastName: "required",
companyName: {
required: true,
no_special_characters: true,
maxlength: 64
},
companyFullName: "required",
password: {
required: true,
minlength: 6
},
confirmPassword: {
required: true,
minlength: 6,
equalTo: "#mid-box4"
},
emailId: {
required: true,
email: true
}
},
messages: {
firstName: "Please enter your first name",
lastName: "Please enter your last name",
companyName: "Please enter company ID",
companyName: {
required: "Please enter company ID",
no_special_characters: "Company ID should contain atleast one letter and no special characters",
maxlength: "Company ID exceeded the maximum length"
},
companyFullName: "Please enter company name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
confirmPassword: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long",
equalTo: "Please enter the same password as above"
},
emailId: "Please enter a valid email address",
confirmemailId:{
required:"Please confirm email address",
equalTo :"Emailid and confirm emaild must be same"
},
agree: "Please accept Terms of use"
}
});
