如何使用JavaScript驗證下拉菜單？

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

您可以給您的選擇提供一個類，然后遍歷它們，在您進行操作時驗證每個選擇：

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

Answer 3

您可以為表單的所有<select>元素提供一個類。 然后，您可以使用querySelectorAll函數獲取此類的所有元素。 根據caniuse.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.