Javascript驗證下拉菜單和文本輸入

-1

我已經遍尋搜索，無法找到一個很好的解決方案，或者如果它可能與客戶端驗證。Javascript驗證下拉菜單和文本輸入

我的客戶要求用戶被限制在一個固定長度的數字組合中，這個組合是基於下拉選擇。

實施例：
下拉選項
實用甲
實用乙
實用Ç

文本輸入
如果用戶選擇實用程序A，他們必須提供一個8位帳號。
如果用戶選擇工具B，他們必須提供一個10位數的帳號。
如果用戶選擇工具C，他們必須提供一個12位數的帳號。

任何人都知道一個簡單的JavaScript解決方案，將提供答案？我已經爲此而戰勝了自己。

謝謝！

來源

2013-01-17 user1987592

Downvoted直到提供其中「JavaScript的解決方案」的方面您有困難的細節。 – MikeM

在這裏，你去！

HTML

<select id="Select" onchange="checkText()"> 
    <option value="8"> A</option> 
    <option value="10"> B</option> 
    <option value="12"> C</option> 
</select> 

<input id="Enter" type="text" onchange="checkText()" /> 

<div id="Message"></div>

的JavaScript

function checkText(input) { 
    if(document.getElementById("Enter").value.length != document.getElementById("Select").selectedOptions[0].value) { 
    document.getElementById("Message").innerHTML = "Your ID has to be " + document.getElementById("Select").selectedOptions[0].value + " digits long"; 
    } else { 
    document.getElementById("Message").innerHTML = ""; 
    } 
}

這並不光彩可言。但我不會爲你做你的工作。你可以輕鬆地從這裏接。

我還創建了一個jsFiddle

來源

2013-01-17 15:37:31 Amberlamps

謝謝你的開始。我並沒有試圖讓某人爲我完成這項工作。現在，我設法完成了一個實時驗證，通知用戶需要一個最小值和最大值 - 但它不是基於下拉選擇。只是想我會問。 – user1987592

哪裏select是你的下拉列表，並input是你輸入的字符串，你可以使用：

if (!/^\d+$/.test(input) || 
    input.length != [ 8, 10, 12 ][ select.selectedIndex ]) { 
    // Input invalid 
}

繼@ Amberland的反饋：

或者，對於更通用的解決方案，將所需數字的數量存儲爲每個選項元素的值，例如<option value=8>Utility A</option>，並使用：

if (!/^\d+$/.test(input) || input.length != select.value) { 
    // Input invalid 
}

來源

2013-01-17 15:43:28 MikeM

這遠不是通用的。如果您的'

@Amberlamps。是的，數組中數字的順序必須與選項的順序相對應。這不明顯嗎？ – MikeM

這是！但不是通用的！我永遠不會批准這樣的解決方案。 – Amberlamps

Javascript驗證下拉菜單和文本輸入

回答

相關問題