Javascript 仅执行一条if/else语句_Javascript_If Statement

Javascript 仅执行一条if/else语句

javascript if-statement

Javascript 仅执行一条if/else语句,javascript,if-statement,Javascript,If Statement,我有两个if/else语句比较同一个变量，在一个函数中使用。我不希望，也不认为有理由嵌套这些声明 function checkUser() { var user = document.getElementById('usern').value; var element = document.getElementById('labelUser'); if (user.length < 3 || user.length > 15) { element.innerHT

我有两个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"/>';  
  }     

}

函数checkUser（）{
var user=document.getElementById（'usern'）。值；
var元素=document.getElementById（'labelUser'）；
如果（user.length<3 | | user.length>15）{
element.innerHTML=“长度无效。”；
element.style.color=“红色”；
} 
否则{
element.innerHTML=''；
}   
如果（user.match（/[\！@\$%^&\*，]+/i））{
element.innerHTML=“无效字符。”；
element.style.color=“红色”；
}   
否则{
element.innerHTML=''；
}     
}

如何改进此代码

您可以这样最小化代码：

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

var gotoElse=false；
如果（user.length<3 | | user.length>15）{
element.innerHTML=“长度无效。”；
element.style.color=“红色”；
} 
else-gotoElse=true；
如果（user.match（/[\！@\$%^&\*，]+/i））{
element.innerHTML=“无效字符。”；
element.style.color=“红色”；
}   
else-gotoElse=true；
如果（gotoElse）{
element.innerHTML=''；
}

如果出现以下情况，请使用

其他选项：
  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"/>';  
  }

if（user.length<3 | | user.length>15）{
element.innerHTML=“长度无效。”；
element.style.color=“红色”；
} 
如果（user.match（/[\！@\$%^&\*，]+/i））{
element.innerHTML=“无效字符。”；
element.style.color=“红色”；
}   
否则{
element.innerHTML=''；
}
函数checkUser（）{
var user=document.getElementById（'usern'）。值；
var元素=document.getElementById（'labelUser'）；
如果（user.length<3 | | user.length>15）{
element.innerHTML=“长度无效。”；
element.style.color=“红色”；
} 
如果（user.match（/[\！@\$%^&\*，]+/i））{
element.innerHTML=“无效字符。”；
element.style.color=“红色”；
}   
否则{
element.innerHTML=''；
}     
}
这里有一个简短的写作方法
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";
}

var valid=''；
element.innerHTML=user.length<3 | | user.length>15？“无效长度。”：有效；
element.innerHTML=user.match（/[\！@\$%^&\*，]+/i）？“无效字符。”：有效；
if（element.innerHTML！==有效）{
element.style.color=“红色”；
}
我会把问题扭转过来。。。首先将默认值指定给变量，并仅在必要时覆盖。然后使用这些变量在末尾指定给元素
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;   
}

函数checkUser（）{
var user=document.getElementById（'usern'）。值；
var元素=document.getElementById（'labelUser'）；
var outputHTML=''；
var color=''；
如果（user.length<3 | | user.length>15）{
outputHTML=“长度无效。”；
color=“红色”；
} 
如果（user.match（/[\！@\$%^&\*，]+/i））{
outputHTML=“无效字符。”；
color=“红色”；
}   
element.innerHTML=outputHTML；
element.style.color=颜色；
}
这将为您提供一个非常好的输出，如果两个错误都存在，将显示这两个错误
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"/>'; 
  }
}

函数checkUser（）{
var user=document.getElementById（'usern'）。值；
var元素=document.getElementById（'labelUser'）；
var errorMsg=[]；
如果（user.length<3 | | user.length>15）{
errorMsg.push（“无效长度”）；
} 
如果（user.match（/[\！@\$%^&\*\s，]+/i））{
errorMsg.push（“无效字符”）；
}   
if（errorMsg.length）{
element.innerHTML=errorMsg.join（“，”）；
element.style.color=“红色”；
}否则{
element.innerHTML=''；
}
}

您可以在这里找到正在运行的示例，
函数checkUser（）{
var user=document.getElementById（'usern'）。值，
element=document.getElementById（'labelUser'），
err=[]，
html，颜色；
如果（user.length<3 | | user.length>15）{
错误推送（“无效长度”）；
}
if（user.match（/[\！@\$%^&\*，]+/i））{
err.push（'无效字符'）；
}
如果（错误长度）{
颜色=红色；
html=err.join（“
”）；
}否则{
html=''；
}
element.style.color=颜色| |“”；
element.innerHTML=html；
}
嗯，这不属于这里，最好将它移到代码审阅-codereview.stackexchange.com应该迁移到codereview它工作得很好，谢谢。我想，当我第一次用“elseif”来判断它是否有效时，我当时一定是在脚本中做了一些其他错误的事情。感谢您抽出时间。您确实意识到使用else if跳过了一层错误检查，对吗？太棒了，谢谢！我喜欢这样。谢谢我对它进行了一些更新，以消除var和空格，因为您通常不会在用户名中看到它们，
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"/>'; 
  }
}

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