根据先前的选择下拉列表选项动态填充选择下拉列表并进行验证

时间：2018-07-16 05:30:24

标签： javascript function validation

我一直在尝试获取功能； switchState（）”用于验证输入。

我在创意领域的专业知识，因此也被驱使者试图使其正常工作。

应如何运行； 从下拉菜单“状态”中进行选择，然后用户必须输入邮政编码。根据选择的状态进行验证，如果正确则显示绿色背景，否则显示红色。

我相信有人可以帮助我。

在此先感谢.... matt。

html如下：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div>Country:
    <select class="uk-form-select" name="country" id="country" type="text" placeholder="select country first">
      <option value="0">select country</option>
      <option value="AU">Australia</option>
      <option value="NZ">New Zealand</option>
    </select>
  </div>
  <div>State:
    <select type="text" name="state" id="state" placeholder="select state" onchange="return stateColours()">
      <optgroup label="Aust States">
        <option value="0">select a state</option>
        <option value="SA">SA</option>
        <option value="NSW">NSW</option>
        <option value="VIC">VIC</option>
        <option value="ACT">ACT</option>
        <option value="TAS">TAS</option>
        <option value="QLD">QLD</option>
        <option value="NT">NT</option>
      </optgroup>
      <optgroup label="NZ States">NZ States
        <option value="AU">Auckland</option>
        <option value="NO">Northland</option>
        <option value="SO">Southland</option>
      </optgroup>
    </select>
  </div>
  <div class="uk-form-input">
    <label class="uk-form-label" id="postcodeLabel" name="postcodeLabel">Postcode:  
      <input class="uk-input" type="text" id="postcodeInput" name="postcodeInput" placeholder="0000" size="4" required="required" title="Postcode is incorrect for state" onblur="return validateErrors()" /> 
      <span class="uk-text-center" id="postcodeInputError" name="postcodeInputError" style="display: none;"></span>
    </label>
  </div>
</body>
</html>

javascript：

function switchState() {
  var state = (document.getElementById("state").value);

  switch (state) {
    case "SA":
      var postcodeRegEx = /^5[0-9]{3}$/;
      break;
    case "NSW":
      var postcodeRegEx = /^2[0-9]{3}$/;
      break;
    case "VIC":
      var postcodeRegEx = /^3[0-9]{3}$/;
      break;
    case "ACT":
      var postcodeRegEx = /^3[0-9]{3}$/;
      break;
    case "QLD":
      var postcodeRegEx = /^4[0-­9]{3}$/;
      break;
    case "NT":
      var postcodeRegEx = /^08[0-9]{2}$/;
      break;
    case "TAS":
      var postcodeRegEx = /^7[0-9]{3}$/;
      break;
  }
  if (!postcodeRegEx.test(document.getElementById("postcodeInput").value))  {   //failure
    postcodeInput.style.background = '#FF9999';
    postcodeInputError.style.display = "block";
    postcodeInputError.innerHTML = postcodeInput.title;
    postcodeInput.focus();
    return  false;
  } 
  else  {
    //success
    postcodeInput.style.background = '#CCFFCC';
    postcodeInputError.style.display = "none";
    return  true; 
  }

1 个答案:

答案 0 :(得分：0)

您应该在更改时绑定事件，并调用另一个检查国家/地区选择值的函数，并根据其值显示隐藏optgroup。 您可以使用querySelector获取正确的optgroup元素。

您会注意到，我已删除onchange作为内联属性，而改用addEventListener。这是更清晰的解决方案，您将所有js代码都放在一个地方。

此外，您已经在内联onchange调用中调用了stateColours，并在switchState中调用了它，所以我在两个地方都只更改了一个函数名称，因为它看起来像是同一函数。 

var countrySelect = document.getElementById("country");
var stateSelect = document.getElementById("state");
var postCodeInput = document.getElementById("postcodeInput");

countrySelect.addEventListener('change', showHideOptGroup);
stateSelect.addEventListener('change', stateColours);
postCodeInput.addEventListener('blur', validateErrors);
showHideOptGroup(); //call it initially to hide all optgroups 

function showHideOptGroup(){
var country = (document.getElementById("country").value);
var stateSelect = document.querySelector("#state");
var AUOptGroup = stateSelect.querySelector('optgroup[label="Aust States"]');
var NZOptGroup = stateSelect.querySelector('optgroup[label="NZ States"]');

  if(country === 'AU'){
    AUOptGroup.style.display = "block";
  }else{
    AUOptGroup.style.display = "none";
  }

  if(country === 'NZ'){
   NZOptGroup.style.display = "block";
  }else{
   NZOptGroup.style.display = "none";
  }
  
  if(country === '0'){
  NZOptGroup.style.display = "none";
   AUOptGroup.style.display = "none";
  }
	
}

function stateColours(){ //you have called it stateColours in inline onchange call, and switchState, so I have unified it
var state = (document.getElementById("state").value);

switch (state)
{
    case "SA": 
    postcodeRegEx=/^5[0-9]{3}$/;
    break; 
    case "NSW": 
    postcodeRegEx=/^2[0-9]{3}$/;
    break;
    case "VIC": 
    postcodeRegEx=/^3[0-9]{3}$/;
    break;
    case "ACT": 
    postcodeRegEx=/^3[0-9]{3}$/;
    break;
    case "QLD": 
    postcodeRegEx=/^4[0-­9]{3}$/;
    break;
    case "NT": 
    postcodeRegEx=/^08[0-9]{2}$/;
    break;
    case "TAS": 
    postcodeRegEx=/^7[0-9]{3}$/;
    break;
    default: 
    postcodeRegEx = ''; //I have set it as default, since it looks like you haven't finished your switch statement for NZ states, so it doesn't throw errors below when calling test 
}
    if(postcodeRegEx!== undefined && postcodeRegEx!= '' && !postcodeRegEx.test(document.getElementById("postcodeInput").value))   //just remove first two checks for empty and undefined
        {  
        //failure
        postcodeInput.style.background='#FF9999';
        postcodeInputError.style.display="block";
        postcodeInputError.innerHTML=postcodeInput.title;
        postcodeInput.focus();
        return  false;
        }   
            else   
            {
                //success
                postcodeInput.style.background='#CCFFCC';
                postcodeInputError.style.display="none";
                return  true;    
            }  


}

//you haven't provided this code, but I have placed it, since it causes errors when it is called onblur
function validateErrors(){


}
<div>Country:
<select class="uk-form-select" name="country" id="country" type="text" placeholder="select country first">      <option value="0">select country</option>
    <option value="AU">Australia</option>
    <option value="NZ">New Zealand</option>
</select>
</div>
<div>State:  
<select type="text" name="state" id="state" placeholder="select state"> 
        <optgroup  label="Aust States">
            <option  value="0">select a state</option>
                <option  value="SA">SA</option>
                <option  value="NSW">NSW</option>
                <option  value="VIC">VIC</option>
                <option  value="ACT">ACT</option>
                <option  value="TAS">TAS</option>
                <option  value="QLD">QLD</option>
                <option  value="NT">NT</option>
            </optgroup>
            <optgroup  label="NZ States">NZ States  
                <option  value="AU">Auckland</option>
                <option  value="NO">Northland</option>
                <option  value="SO">Southland</option>
            </optgroup>
        </select>
    </div>
<div class="uk-form-input">
    <label class="uk-form-label" id="postcodeLabel" name="postcodeLabel">Postcode:  
        <input class="uk-input" type="text" id="postcodeInput" name="postcodeInput" placeholder="0000" size="4" required="required" title="Postcode is incorrect for state"/> 
        <span class="uk-text-center" id="postcodeInputError" name="postcodeInputError" style="display: none;"></span>
    </label>
</div>

相关问题
最新问题