Jquery 选择输入上的自定义复杂表单验证
我有一个表单,其中包含10个选择菜单,使用户可以安排2支球队之间的传奇联盟比赛。 5个团队A的选择菜单和5个团队B的选择菜单。 每个select包含4组5名玩家,如下所示:Jquery 选择输入上的自定义复杂表单验证,jquery,html,Jquery,Html,我有一个表单,其中包含10个选择菜单,使用户可以安排2支球队之间的传奇联盟比赛。 5个团队A的选择菜单和5个团队B的选择菜单。 每个select包含4组5名玩家,如下所示: <select name="teamA_first" id="teamA_first" class="team_A"> <option value="0">select</option> <optgroup label="group1"></optgrou
<select name="teamA_first" id="teamA_first" class="team_A">
<option value="0">select</option>
<optgroup label="group1"></optgroup>
<option data-guild="1" value="1">player 1</option>
<option data-guild="1" value="2">player 2</option>
<option data-guild="1" value="3">player 3</option>
<option data-guild="1" value="4">player 4</option>
<option data-guild="1" value="5">player 5</option>
<optgroup label="group2"></optgroup>
<option data-guild="2" value="6">player 6</option>
<option data-guild="2" value="7">player 7</option>
<option data-guild="2" value="8">player 8</option>
<option data-guild="2" value="9">player 9</option>
<option data-guild="2" value="10">player 10</option>
<optgroup label="group3"></optgroup>
<option data-guild="3" value="11">player 11</option>
<option data-guild="3" value="12">player 12</option>
<option data-guild="3" value="13">player 13</option>
<option data-guild="3" value="14">player 14</option>
<option data-guild="3" value="15">player 15</option>
<optgroup label="group4"></optgroup>
<option data-guild="4" value="16">player 16</option>
<option data-guild="4" value="17">player 17</option>
<option data-guild="4" value="18">player 18</option>
<option data-guild="4" value="19">player 19</option>
<option data-guild="4" value="20">player 20</option>
</select>
我想验证以下表单:
<select name="teamA_first" id="teamA_first" class="team_A">
<option value="0">select</option>
<optgroup label="group1"></optgroup>
<option data-guild="1" value="1">player 1</option>
<option data-guild="1" value="2">player 2</option>
<option data-guild="1" value="3">player 3</option>
<option data-guild="1" value="4">player 4</option>
<option data-guild="1" value="5">player 5</option>
<optgroup label="group2"></optgroup>
<option data-guild="2" value="6">player 6</option>
<option data-guild="2" value="7">player 7</option>
<option data-guild="2" value="8">player 8</option>
<option data-guild="2" value="9">player 9</option>
<option data-guild="2" value="10">player 10</option>
<optgroup label="group3"></optgroup>
<option data-guild="3" value="11">player 11</option>
<option data-guild="3" value="12">player 12</option>
<option data-guild="3" value="13">player 13</option>
<option data-guild="3" value="14">player 14</option>
<option data-guild="3" value="15">player 15</option>
<optgroup label="group4"></optgroup>
<option data-guild="4" value="16">player 16</option>
<option data-guild="4" value="17">player 17</option>
<option data-guild="4" value="18">player 18</option>
<option data-guild="4" value="19">player 19</option>
<option data-guild="4" value="20">player 20</option>
</select>
每支球队必须至少有一名来自每组的球员
例如,A队必须至少包含一名来自第1组的球员、一名来自第2组的球员、一名来自第3组的球员和一名来自第4组的球员
B队也一样
我制作了一个函数来解决这个问题,但我认为它可以更优化:
$( "#addMatchForm" ).submit(function( event ) {
var $inputs_a = $('#addMatchForm :input.team_A');
var $inputs_b = $('#addMatchForm :input.team_B');
var values_a = [];
var values_b = [];
$inputs_a.each(function(index, value) {
values_a[index] = $(this).find(':selected').data('guild');
});
$inputs_b.each(function(index, value) {
values_b[index] = $(this).find(':selected').data('guild');
});
var g1 = 1;
var g2 = 2;
var g3 = 3;
var g4 = 4;
//count guilds occurences on team A selects
var a_occ1 = $.grep(values_a, function (elem , i) {
return elem == g1;
}).length;
var a_occ2 = $.grep(values_a, function (elem , i) {
return elem == g2;
}).length;
var a_occ3 = $.grep(values_a, function (elem , i) {
return elem == g3;
}).length;
var a_occ4 = $.grep(values_a, function (elem , i) {
return elem == g4;
}).length;
//count guilds occurences on team B selects
var b_occ1 = $.grep(values_b, function (elem , i) {
return elem == g1;
}).length;
var b_occ2 = $.grep(values_b, function (elem , i) {
return elem == g2;
}).length;
var b_occ3 = $.grep(values_b, function (elem , i) {
return elem == g3;
}).length;
var b_occ4 = $.grep(values_b, function (elem , i) {
return elem == g4;
}).length;
var error = false ;
if(a_occ1 < 1){
error = true ;
alert('No players from team 沖縄のトラ selected on Team A! You must at least choose one player from each team .');
}
if(a_occ2 < 1){
error = true ;
alert('No players from team Ozone Rampage selected on Team A! You must at least choose one player from each team .');
}
if(a_occ3 < 1){
error = true ;
alert('No players from team Rascal Jester selected on Team A! You must at least choose one player from each team .');
}
if(a_occ4 < 1){
error = true ;
alert('No players from team DetnatioN FM selected on Team A! You must at least choose one player from each team .');
}
if(b_occ1 < 1){
error = true ;
alert('No players from team 沖縄のトラ selected on Team B! You must at least choose one player from each team .');
}
if(b_occ2 < 1){
error = true ;
alert('No players from team Ozone Rampage selected on Team B! You must at least choose one player from each team .');
}
if(b_occ3 < 1){
error = true ;
alert('No players from team Rascal Jester selected on Team B! You must at least choose one player from each team .');
}
if(b_occ4 < 1){
error = true ;
alert('No players from team DetnatioN FM selected on Team B! You must at least choose one player from each team .');
}
if(error){
return false;
}else{
return true;
}
});
有什么想法吗?
谢谢你社区不是真正为你工作,而是帮助你克服你已经尝试过的问题。向我们展示您迄今为止尝试过的代码,指出您遇到的问题,并就具体问题寻求帮助。我已经做了一个功能,做的工作,但我正在寻找一个优化的版本。