Question

我正在尝试验证表单上的3个选择字段，我的应用程序是曲棍球的得分保持应用程序，我正在录制得分游戏。 A是进球得分手，B是主要助攻，C是次要助攻。我有以下验证规则：

A不能为空
B不能等于A或C
C不能等于A或B
如果B为空，则C必须为空

换句话说，A，AB或ABC是有效组合，但所有组合都必须是唯一的。我通过将禁用的引导类/ html属性应用于提交按钮来禁用提交按钮。

在我的实际代码中，A = awayGoal，B = awayPAssist，C = awaySAssist

我目前有以下jQuery代码：

var awayGoal = $("#awayGoal");
var awayPAssist = $("#awayPAssist");
var awaySAssist = $("#awaySAssist");
var awayGSubmit = $("#submitAwayScore");

$('#awayScore select').change(function() {
if(awayGoal.val() != "" && awayPAssist.val() != awayGoal.val() && awayGoal.val() != awaySAssist.val()) {
    if(awayPAssist.val() != "" && awaySAssist.val() != "") {
        awayGSubmit.disableButton();
    }
    awayGSubmit.clearDisabled();
}
else {
    awayGSubmit.disableButton();
}
});

这允许唯一的A + C组合通过，但是，相同的A + C不通过。每个选择元素都包含加载到其中的游戏中涉及的玩家的数量。还有第一个option是静态选项，称为N / A，其代码为：<option value="">N/A</option>这允许管理员在不存在的情况下拥有空的主助攻和辅助助攻。 / p>

任何帮助都将非常感激，任何提高效率的方法都非常受欢迎，我刚刚开始使用jQuery。提前谢谢。

Answer 1

由于您只有三个案例而且只有三个项目，您可以对每个条件进行强制检查，然后将它们组合在一起以确定按钮的禁用状态。

JSBin example

var awayGoal = $("#awayGoal");
var awayPAssist = $("#awayPAssist");
var awaySAssist = $("#awaySAssist");
var awayGSubmit = $("#submitAwayScore");


$('#awayScore select').change(function() {
  var A = awayGoal.val();
  var B = awayPAssist.val();
  var C = awaySAssist.val();
  console.log(A,B,C);

  if(// case 1: only A 
     (A !== "" && B === "" && C === "") ||  

     // case 2: only A and B, A != B
     (A !== "" && B !== "" && C === "" && A !== B) || 

     // case 3: A, B, C, all unique
     (A !== "" && B !== "" && C !== "" && A !== B && A !== C && B !== C) ) { 

  //awayGSubmit.clearDisabled();
  console.log("enable button");
}
else {
    //awayGSubmit.disableButton();
    console.log("disable button");
}
});

Answer 2

我目前正在开发具有如此多验证规则的系统。我尝试使用我自己构建的jquery进行验证，但是我必须考虑很多事情并编写很多代码。

我建议您尝试使用此jquery validation engine。您可以查看The Demo page here它有很多功能，最有趣的部分是您可以定义自己的规则或验证。试一试。

祝你好运。

如何使用jQuery验证3个选择元素？

2 个答案: