用過(guò)validate的都知道，它是通過(guò)name去找到相應(yīng)的節(jié)點(diǎn)担敌，然后再去處理規(guī)則的內(nèi)容摔敛，那如果多個(gè)相同name會(huì)如何？
大致如下
<form id="demoForm">
<ul class="list">
<li class="title">
<input type="text" name="title" />
</li>
<li class="title">
<input type="text" name="title" />
</li>
</ul>
</form>
這時(shí)候我們嘗試用上validate
<script>
$('#demoForm').validate({
rules: {
'title': { required: true },
}
});
</script>
發(fā)現(xiàn)永遠(yuǎn)只有第一個(gè)title驗(yàn)證提示效果全封。
查找源碼得知马昙，elements函數(shù)中有下面的判斷桃犬，
// select only the first element for each name, and only those with rules specified
if ( this.name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {
return false;
}
我看了有些文章說(shuō)注釋那段代碼或者進(jìn)行重寫(xiě)，但我個(gè)人覺(jué)得也不一定需要這樣改行楞。
既然插件要求name不能重復(fù)攒暇，那我們可以通過(guò)改寫(xiě)name屬性，同時(shí)運(yùn)用validate提供的rules()方法可以動(dòng)態(tài)新增/移除規(guī)則子房。
具體代碼思路如下：
<form id="demoForm">
<ul class="list">
<li class="title">
<input type="text" class="demo-title" />
</li>
<li class="title">
<input type="text" class="demo-title" />
</li>
</ul>
</form>
<script>
$('#demoForm').validate({
rules: {}
});
$('.demo-title').each(function (i,v) {
$(v).attr('name', 'demoTitle'+i);
$(v).rules('remove', 'required');
$(v).rules('add',{
required: true
})
})
</script>
實(shí)現(xiàn)思路如下：
1.既然無(wú)法相同name形用，那就保持每一個(gè)name的唯一性。
2.通過(guò)rules('remove')和rules('add')來(lái)管理規(guī)則证杭，而不直接定義在rules:{}對(duì)象內(nèi)尾序。
3.保持先移除，再新增的原則躯砰，可以順帶處理動(dòng)態(tài)增減的規(guī)則每币。
可以解決的問(wèn)題：
1.表單元素動(dòng)態(tài)增減的驗(yàn)證規(guī)則判斷。
2.另辟蹊徑不改源碼的基礎(chǔ)下琢歇，通過(guò)循環(huán)保持name的唯一性使用validate兰怠。
