Только один оператор 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

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 2

Вы можете минимизировать такой код:

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 3

Использование 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 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; 
}