使用 jquery 验证器验证两个字段
Posted
技术标签:
【中文标题】使用 jquery 验证器验证两个字段【英文标题】：Validate the two field using jquery validator 【发布时间】：2018-09-08 11:46:18 【问题描述】：我想使用validator plugin方法验证这两个字段，比如及格分数总是低于满分。
注意：：我的 Html 字段是动态的，因此不应视为单个字段。
这是我的 Html 字段下方。
<td>
<div class="form-group">
<input type="text" name="fmark_<?php echo $value['id'] ?>" class="form-control" id="fmark_<?php echo $value['id'] ?>" value="<?php echo $value['full_marks'] ?>" placeholder="Enter Full Marks">
</div>
</td>
<td>
<div class="form-group">
<input type="text" name="pmarks_<?php echo $value['id'] ?>" class="form-control" id="pmarks_<?php echo $value['id'] ?>" value="<?php echo $value['passing_marks'] ?>" placeholder="Enter Passing Marks">
</div>
</td>
下面是我的 jquery 验证器。
$('input[id^="fmark_"]').each(function ()
$(this).rules('add',
required: true,
messages:
required: "Required"
);
);
$('input[id^="pmarks_"]').each(function ()
$(this).rules('add',
required: true,
messages:
required: "Required"
);
);
【问题讨论】：
【参考方案1】：使用 jQueryValidate，这很容易通过创建如下所示的验证器来完成。 （您可能需要一种更好的方法将 fmark id 设置为变量“id”。编写代码的方式必须解析文本以匹配不理想的 id。）
$.validator.addMethod("lessThanFullMarks",
function (value, event, params)
var id = 'fmark_'+params;
return parseInt(value) < parseInt($('#'+id).val()); );
);
然后使用它只需将其添加到规则和消息中，就像这样。
$('input[id^="fmark_"]').each(function ()
$(this).rules('add',
required: true,
messages:
required: "Required"
);
);
$('input[id^="pmarks_"]').each(function ()
$(this).rules('add',
required: true,
lessThanFullMarks: ["<PUT THE MATCHING FULL MARK ID HERE>"],
messages:
required: "Required",
lessThanFullMarks: "Must be greater than Full Marks."
);
);
只是我个人的偏好，但我认为将规则应用于表单比在匹配的选择器上运行 each 更简洁、更灵活。这是我的一个项目中的一个例子。
$("#createContractForm").validate(
rules:
Name:
required: true,
maxlength: 50
,
ContractNumber:
required: true,
maxlength: 100
,
InitialValue:
required: true,
minlength: 1,
number: true
,
SourcingDate:
required: true,
validDate: true,
date: true
,
EffectiveDate:
required: true,
validDate: true,
date: true,
greaterThanSourcingDate: true
,
EndDate:
required: true,
validDate: true,
date: true,
greaterThanEffectiveDate: true
,
ChampionId:
required: true
,
CategoryId:
required: true
,
SubcategoryId:
required: true
,
Details:
required: true
,
ClientId:
required: true
,
ClientRegionId:
required: true,
remote:
url: $("#urlContractExists").data("request-url"),
type: "post",
data:
ClientId: function ()
return $("#ClientId").val();
,
ClientRegionId: function ()
return $("#ClientRegionId").val();
,
CategoryId: function ()
return $("#CategoryId").val();
,
SubcategoryId: function ()
return $("#SubcategoryId").val();
,
SupplierId: function ()
return $("#SupplierId").val();
,
SupplierRegionId: function ()
return $("#SupplierRegionId").val();
,
SupplierId:
required: true
,
SupplierRegionId:
required: true,
remote:
url: $("#urlContractExists").data("request-url"),
type: "post",
data:
ClientId: function ()
return $("#ClientId").val();
,
ClientRegionId: function ()
return $("#ClientRegionId").val();
,
CategoryId: function ()
return $("#CategoryId").val();
,
SubcategoryId: function ()
return $("#SubcategoryId").val();
,
SupplierId: function ()
return $("#SupplierId").val();
,
SupplierRegionId: function ()
return $("#SupplierRegionId").val();
,
messages:
Name:
required: "Contract Name is required"
,
ContractNumber:
required: "Contract Number is required"
,
InitialValue:
required: "Initial Value is required",
number: "Initial Value must be a number"
,
SourcingDate:
required: "Sourcing Date is required",
date: "Sourcing Date must be a valid date"
,
EffectiveDate:
required: "Effective Date is required",
date: "Effective Date must be a valid date",
greaterThanSourcingDate: "Effective Date must be greater than the Sourcing Date"
,
EndDate:
required: "End Date is required",
date: "End Date must be a valid date",
greaterThanEffectiveDate: "End Date must be greater than the Effective Date"
,
ChampionId:
required: "A Champion is required"
,
CategoryId:
required: "A Category is required"
,
SubcategoryId:
required: "A Subcategory is required"
,
Details:
required: "Deatils are required"
,
ClientId:
required: "Client is required"
,
ClientRegionId:
required: "Client Region is required",
remote: "Contract for the same Category, Subcategory, Client Region, and Supplier Region already exists."
,
SupplierId:
required: "Supplier is required"
,
SupplierRegionId:
required: "Supplier Region is required",
remote: "Contract for the same Category, Subcategory, Client Region, and Supplier Region already exists."
,
highlight: function (element)
$(element).closest(".form-group").addClass("has-error");
,
unhighlight: function (element)
$(element).closest(".form-group").removeClass("has-error");
,
errorElement: "span",
errorClass: "help-block",
errorPlacement: function (error, element)
if (element.parent(".input-group").length)
error.insertAfter(element.parent());
else
error.insertAfter(element);
);
【讨论】：
谢谢您，在您的 jquery add 方法中稍作修改并且工作正常。谢谢您的帮助... 太棒了。让我知道你做了什么修改，我会更新答案。感谢您的勾选！ 您的脚本已修改。 $.validator.addMethod("lessThanFullMarks", function (value, event, params) var id = 'fmark_'+params; return parseInt(value)以上是关于使用 jquery 验证器验证两个字段的主要内容，如果未能解决你的问题，请参考以下文章
我们可以使用 jquery 验证不包含表单标签的 html 页面字段吗？