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

How can I validate 3 select elements with jQuery?

本文关键字：选择 元素 3个 验证 何使用 jQuery      更新时间：2023-09-26

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

  1. A不能为空
  2. B不能等于A或C
  3. C不能等于A或B
  4. 如果B为空，则C必须为空

所以换句话说，A, AB或ABC是有效的组合，但它们必须是唯一的。我通过将禁用的bootstrap类/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不通过。每个select元素都包含了参与游戏的玩家的号码。还有第一个option，它是一个静态选项，称为N/a，其代码为:<option value="">N/A</option>，这允许管理员在不存在的情况下拥有空的主辅助和辅助。

任何帮助都将非常感激，任何使它更有效的方法都是非常受欢迎的，因为我刚刚开始使用jQuery。

由于您只有三种情况和三个项目，因此您可以强力检查每种条件，然后将它们组合在一起以确定按钮的禁用状态。

JSBin例子

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");
}
});

我目前开发的系统有很多验证规则。我尝试使用我自己构建的jquery来验证，但是我必须考虑很多事情，并且要编写大量代码。

我建议你尝试使用这个jquery验证引擎。你可以在这里查看Demo页面，它有很多功能，最有趣的部分是你可以定义自己的规则或验证。试一试。

好运。

相关文章：