我有两个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"/>';
}
}
如何改进此代码?
答案 0 :(得分:0)
您可以像这样最小化代码:
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"/>';
}
答案 1 :(得分:0)
使用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"/>';
}
答案 2 :(得分:0)
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"/>';
}
}
答案 3 :(得分:0)
这是一种较短的写作方式。
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";
}
答案 4 :(得分:0)
我会解决问题...首先将默认值分配给变量并仅在必要时覆盖。然后使用这些变量分配到最后的元素。
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;
}
答案 5 :(得分:0)
这将为您提供一个非常好的输出,如果它们都存在则会显示两个错误
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/
答案 6 :(得分:0)
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;
}