如何使用JavaScript验证下拉菜单

How to validate a dropdown menu using JavaScript?

本文关键字：下拉菜单 验证 JavaScript 何使用      更新时间：2023-09-26

我在一个页面中有三个下拉菜单。我想在一次单击中验证所有下拉项。任何建议都会有所帮助。

这是我的下拉验证代码：

HTML

<select id="ddlView">
    <option value="0">Select</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>  
<input type="button" onclick="Validate()" value="select" />

JS-

function Validate()
{
    var e = document.getElementById("ddlView");
    var strUser = e.options[e.selectedIndex].value;
    var strUser1 = e.options[e.selectedIndex].text;
    if(strUser==0)
    {
        alert("Please select a user");
    }
}

您可以给您的选择一个类，然后在它们之间循环验证每个类：

// bind an event handler to the button
$('.slectValBtn').click(function(){
   // remove all errors 
   $('.slectVal').removeClass('hasErrors');
   $('.error').remove();
   // create a var to track any errors
    var errors = 0
    // loop through all your elements with the class `slectVal`
    $('.slectVal').each(function(){
       // get the minimum value fo this element
       var min = $(this).data('min-val');
       // get the custom message for this element
       var msg = '<br><span class="error">'+$(this).data('error-msg')+min+'</span>';
       // check the element's value
       if( $(this).val() < min ){
          // if i the value fails validation, add 1 to our errors count
          errors++;
         $(this).addClass('hasErrors');
         // add error message
         $(msg).insertAfter( $(this) );
       }
    
    }); 
    // after looping all elements, check our error count
    if(errors > 0){
      // had errors
      alert('All values must be greater than 0');
    }
    else{
      // no errors
      alert('All values valid!');
      
    }
});
.hasErrors{
    border-style: solid;
    border-width: 1px;
    border-color: red;
    background-color: #FFCCCC;
}
.error{
  
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlView1" class="slectVal" data-error-msg="Pick an option equal to or greater than " data-min-val="1">
        <option value="0">Select</option>
        <option value="1">test1</option>
        <option value="2">test2</option>
        <option value="3">test3</option>
    </select> <br>
    <select id="ddlView2" class="slectVal" data-error-msg="Pick an option equal to or greater than " data-min-val="1">
        <option value="0">Select</option>
        <option value="1">test1</option>
        <option value="2">test2</option>
        <option value="3">test3</option>
    </select>   <br>
    <select id="ddlView3" class="slectVal" data-error-msg="Pick an option equal to or greater than " data-min-val="1">
        <option value="0">Select</option>
        <option value="1">test1</option>
        <option value="2">test2</option>
        <option value="3">test3</option>
    </select>   <br>
    <input type="button" class="slectValBtn" value="select" />

您可以为所有<选择>元素。然后你可以使用querySelectorAll函数来获取这个类的所有元素。根据canouse.com的数据，querySelectorAll比getElementsByClassName更兼容浏览器。它的工作原理类似于CSS选择器（或JQuery选择器）

// get all <select> tags with the "cantBeZero" class
var elements = document.querySelectorAll("select.cantBeZero");
var emptyElements = [];
for(var i=0; i<elements.length; ++i) {
    if(elements[i].options[elements[i].selectedIndex]].value == 0) {
        emptyElements.push(elements[i]);
    }
}
// emptyElements is now an array of all incorrect drop-down menus.

内联事件注册是一种糟糕的做法，您可能应该这样做：

document.querySelector('input[type=button]').addEventListener('click', Validate, false);

至于你最初的问题，你可以在一句话中得到所有的选择，然后逐一验证：

var selectElements = document.getElementsByTagName('select'); 
//Validation logic

如果您想更具体地确定要验证哪些选择列表（如果页面上有3个以上的选择列表），请尝试使用document.querySelectorAll或使用jquery的选择器。

或者，您可以为所有要验证的选择使用一个类，然后像其他用户建议的那样选择。

相关文章：