gpt4 book ai didi

jQuery 验证插件 - 添加适用于多个字段的规则

转载 作者:行者123 更新时间:2023-12-03 21:31:00 27 4
gpt4 key购买 nike

我正在使用jQuery Validation插件:

我有几个大表单字段,我想对其应用相同的规则。我已经简化了这个例子的代码。这段代码不起作用,但我想做这样的事情。第二条规则应适用于 first_namelast_name。我想将所有规则封装在此函数中,而不是编辑某些表单元素的类列表来添加所需的类或其他内容。

(同样,我有几组不同的表单字段,它们具有不同的要求,我想将它们分组。为了简单起见,我只将 required: true 放在该元素中)

$('#affiliate_signup').validate(
{
rules:
{
email: {
required: true,
email: true
},
first_name,last_name: {
required: true
},
password: {
required: true,
minlength: 4
}
}
});

提前致谢。

最佳答案

就我的示例而言,这是基本起始代码:

HTML:

<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_3" />

jQuery:

$('#myForm').validate({
rules: {
field_1: {
required: true,
number: true
},
field_2: {
required: true,
number: true
},
field_3: {
required: true,
number: true
}
}
});

http://jsfiddle.net/9W3F7

<小时/>

选项 1a) 您可以提取规则组并将它们组合成公共(public)变量。

var ruleSet1 = {
required: true,
number: true
};

$('#myForm').validate({
rules: {
field_1: ruleSet1,
field_2: ruleSet1,
field_3: ruleSet1
}
});

http://jsfiddle.net/9W3F7/1

<小时/>

选项 1b) 与上述 1a 相关,但根据您的复杂程度,可以分离出某些组通用的规则并使用 .extend()以无数种方式重新组合它们。

var ruleSet_default = {
required: true,
number: true
};

var ruleSet1 = {
max: 99
};
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1

var ruleSet2 = {
min: 3
};
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2

$('#myForm').validate({
rules: {
field_1: ruleSet2,
field_2: ruleSet_default,
field_3: ruleSet1
}
});

最终结果:

  • field_1 为必填数字,不少于 3。

  • field_2 只是必填数字。

  • field_3 将是不大于 99 的必填数字。

http://jsfiddle.net/9W3F7/2

<小时/>

选项 2a) 您可以根据所需的通用规则将类分配给您的字段,然后将这些规则分配给这些类。使用 addClassRules 方法,我们获取复合规则并将它们转换为类名。

HTML:

<input type="text" name="field_1" class="num" />
<input type="text" name="field_2" class="num" />
<input type="text" name="field_3" class="num" />

jQuery:

$('#myform').validate({ // initialize the plugin
// other options
});

$.validator.addClassRules({
num: {
required: true,
number: true
}
});

http://jsfiddle.net/9W3F7/4/

<小时/>

选项 2b) 与选项 2a 的主要区别在于,您可以通过立即调用 rules('add') 方法来将规则分配给动态创建的输入元素创建它们之后。您可以使用class作为选择器,但这不是必需的。如下所示,我们使用通配符选择器而不是 class

.rules() 方法必须在调用.validate()之后随时调用。

jQuery:

$('#myForm').validate({
// your other plugin options
});

$('[name*="field"]').each(function() {
$(this).rules('add', {
required: true,
number: true
});
});

http://jsfiddle.net/9W3F7/5/

<小时/>

文档:

关于jQuery 验证插件 - 添加适用于多个字段的规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8829030/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com