Question

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

以下是我的下拉验证代码：

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

Answer 1

内联事件注册是一种不好的做法，您应该这样做：

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

关于您的原始问题，您可以在一个语句中获取所有选择，然后逐个验证它们：

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

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

或者您可以在课程中使用您想要验证的所有选项的类，然后选择其他用户建议的那些。

Answer 2

你可以给你的选择一个类，然后循环验证每个类：

＆＃13;

// 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!');
      
    }
});

＆＃13;

.hasErrors{
    border-style: solid;
    border-width: 1px;
    border-color: red;
    background-color: #FFCCCC;
}
.error{
  
  color: red;
}

＆＃13;

<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" />

＆＃13;

Answer 3

您可以为所有＆lt; select＆gt;提供课程你的形式的元素。然后，您可以使用querySelectorAll函数来获取此类的所有元素。根据{{3}}，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.

如何使用JavaScript验证下拉菜单？

3 个答案: