javascript - 只执行一个 if/else 语句

Question

我有两个 if/else 语句在一个函数中比较同一个变量。我不希望，也没有理由嵌套这些语句。

function checkUser() {
  var user = document.getElementById('usern').value;
  var element = document.getElementById('labelUser');

  if (user.length < 3 || user.length > 15) {
    element.innerHTML = "Invalid length.";
    element.style.color = "red";

  } 
  else {
    element.innerHTML = '<img src="http://www.zrfunding.com/wp-content/uploads/2013/05/CheckMarkSmallGreen.jpg" alt="Valid" height="35" width="30"/>';  
  }   

  if (user.match(/[\<\>!@#\$%^&\*,]+/i)){ 
    element.innerHTML = "Invalid characters.";
    element.style.color = "red";

  }   
  else {
    element.innerHTML = '<img src="http://www.zrfunding.com/wp-content/uploads/2013/05/CheckMarkSmallGreen.jpg" alt="Valid" height="35" width="30"/>';  
  }     

}

如何改进此代码？

Answer 1

您可以像这样最小化代码：

  var gotoElse = false;
  if (user.length < 3 || user.length > 15) {
    element.innerHTML = "Invalid length.";
    element.style.color = "red";

  } 
  else gotoElse = true; 

  if (user.match(/[\<\>!@#\$%^&\*,]+/i)){ 
    element.innerHTML = "Invalid characters.";
    element.style.color = "red";

  }   
  else gotoElse = true;

  if(gotoElse) {
    element.innerHTML = '<img src="http://www.zrfunding.com/wp-content/uploads/2013/05/CheckMarkSmallGreen.jpg" alt="Valid" height="35" width="30"/>';  
  }     

Answer 2

使用else if：

  if (user.length < 3 || user.length > 15) {
    element.innerHTML = "Invalid length.";
    element.style.color = "red";

  } 
  else if (user.match(/[\<\>!@#\$%^&\*,]+/i)){ 
    element.innerHTML = "Invalid characters.";
    element.style.color = "red";
  }   
  else {
    element.innerHTML = '<img src="http://www.zrfunding.com/wp-content/uploads/2013/05/CheckMarkSmallGreen.jpg" alt="Valid" height="35" width="30"/>';  
  }

Answer 3

function checkUser() {
  var user = document.getElementById('usern').value;
  var element = document.getElementById('labelUser');

  if (user.length < 3 || user.length > 15) {
    element.innerHTML = "Invalid length.";
    element.style.color = "red";

  } 
  else if (user.match(/[\<\>!@#\$%^&\*,]+/i)){ 
    element.innerHTML = "Invalid characters.";
    element.style.color = "red";

  }   
  else {
    element.innerHTML = '<img src="http://www.zrfunding.com/wp-content/uploads/2013/05/CheckMarkSmallGreen.jpg" alt="Valid" height="35" width="30"/>';  
  }     
}

Answer 4

这是一个更短的写法。

var valid = '<img src="http://www.zrfunding.com/wp-content/uploads/2013/05/CheckMarkSmallGreen.jpg" alt="Valid" height="35" width="30"/>';

element.innerHTML = user.length < 3 || user.length > 15 ? "Invalid length." : valid;
element.innerHTML = user.match(/[\<\>!@#\$%^&\*,]+/i) ? "Invalid characters." : valid;

if( element.innerHTML !== valid ){
  element.style.color = "red";
}

Answer 5

我会扭转这个问题......首先将默认值分配给一个变量，并仅在必要时覆盖。然后使用这些变量在最后分配给元素。

function checkUser() {
  var user = document.getElementById('usern').value;
  var element = document.getElementById('labelUser');
  var outputHTML = '<img src="http://www.zrfunding.com/wp-content/uploads/2013/05/CheckMarkSmallGreen.jpg" alt="Valid" height="35" width="30"/>';
  var color = '';

  if (user.length < 3 || user.length > 15) {
    outputHTML = "Invalid length.";
    color = "red";
  } 

  if (user.match(/[\<\>!@#\$%^&\*,]+/i)){ 
    outputHTML = "Invalid characters.";
    color = "red";
  }   

  element.innerHTML = outputHTML;
  element.style.color = color;   
}

Answer 6

这将为您提供一个非常好的输出，如果它们都存在，它将显示两个错误

function checkUser() {
  var user = document.getElementById('usern').value;
  var element = document.getElementById('labelUser');
  var errorMsg = [];

  if (user.length < 3 || user.length > 15) {
    errorMsg.push("Invalid length"); 
  } 

  if (user.match(/[\<\>!@#\$%^&\*\s,]+/i)){ 
    errorMsg.push("Invalid characters");
  }   

  if (errorMsg.length) {
    element.innerHTML = errorMsg.join(",");
    element.style.color = "red"; 
  } else {
    element.innerHTML = '<img src="http://www.zrfunding.com/wp-content/uploads/2013/05/CheckMarkSmallGreen.jpg" alt="Valid" height="35" width="30"/>'; 
  }
}

你可以在这里找到运行示例，http://jsfiddle.net/LR9u3/

Answer 7

function checkUser() {
    var user = document.getElementById('usern').value,
        element = document.getElementById('labelUser'),
        err = [],
        html, color;

    if (user.length < 3 || user.length > 15) {
        err.push('Invalid length');
    }
    if (user.match(/[\<\>!@#\$%^&\*,]+/i)) {
        err.push('Invalid characters');
    }
    if (err.length) {
        color = 'red';
        html = err.join('<br />');
    } else {
        html = '<img src="http://www.zrfunding.com/wp-content/uploads/2013/05/CheckMarkSmallGreen.jpg" alt="Valid" height="35" width="30"/>';
    }
    element.style.color = color || '';
    element.innerHTML = html;
}