基于选择的jquery动态验证

Posted 2023-05-09

【中文标题】基于选择的jquery动态验证

【英文标题】：jquery dynamic validation based on selection

【发布时间】：2011-08-08 11:06:56

【问题描述】：

我在下面的 jquery 代码中循环遍历一个 div 并找到 2 个下拉菜单和 1 个文本框。

所以基本上 div 中的每一行都会有 2 个 HTML SELECT 和 1 个输入类型文本框

我想根据这 2 个 html 选择的选定值对文本框进行验证。

例如：如果我从第一个下拉菜单中选择 option1 并从第二个下拉菜单中选择 option3，那么我的文本框只能包含 20 个字符。

请告知我该怎么做。

var searchString = '';
        $("#btnSearch").click(function () 
            searchString = "";
            $("div.cloneRow").each(function () 
                if ($(this).find("input[type=text]").val() != '') 
                    $(this).find("select").each(function () 
                        if ($.trim($(this).val()) != '') 
                            searchString += $.trim($(this).val()) + " ";
                        
                    );
                    $(this).find("input[type=text]").each(function () 
                        searchString += $.trim($(this).val());
                    );
                
            );
            alert(searchString);
        );
    );

谢谢

【参考方案1】：

每次按下按钮时，您都会遍历包含 2 个选择框和一个文本框的 div，并为每个文本框检查选择框的值并做出决定。我举了一个例子，但它可以进一步改进。希望对你有帮助

          $("#yourbuttonid").click(function()
              $("div.cloneRow").each(function () 
                  var $select1 = $($(this).find("select.first"));
                  var $select2 = $($(this).find("select.second"));
                  var $text = $("input[type='text']");
                  if($select2.val() != "")
                      //Your cases go in here
                      if($select1.val() == "1" && $select2.val() == "4")
                          //check if the allowed length is exceeded for this case
                          if($text.val().length > 20)
                              //if it is empty the textbox and give a red border
                              $text.val("");
                              $text.css("border", "1px solid red");
                          
                      
                      //other cases go here
                   
              );
          );

【讨论】：

感谢您的回复，我忘了提到我将调用按钮单击来检查此验证，因此在这种情况下根本不会调用我的更改事件。请指教