Question

我正在尝试写一个简单的表单。如果没有选择任何内容，表单基本上需要通过突出显示标签单击提交按钮来验证2个必填下拉字段。

我有这个工作正常，但我必须问，它是如此长而且厚实的atm，有没有办法简单地这样做？

function submitCheck() {
    if (formTest.connection.value.length==0 && formTest.location.value.length==0) {
        document.getElementById("connection").style.color = "#961515";
        document.getElementById("location").style.color = "#961515";
        document.getElementById("connection").style.fontStyle = "italic";
        document.getElementById("location").style.fontStyle = "italic";
    } else if (formTest.connection.value.length==0 && formTest.location.value.length!=0) {
        document.getElementById("connection").style.color = "#961515";
        document.getElementById("connection").style.fontStyle = "italic";
        document.getElementById("location").style.color = "#000000";
        document.getElementById("location").style.fontStyle = "normal";
    } else if (formTest.location.value.length==0 && !formTest.connection.value.length!=0) {
        document.getElementById("location").style.color = "#961515";
        document.getElementById("location").style.fontStyle = "italic";
        document.getElementById("connection").style.color = "#000000";
        document.getElementById("connection").style.fontStyle = "normal";
    } else {
        document.getElementById("connection").style.color = "#000000";
        document.getElementById("location").style.color = "#000000";
        document.getElementById("location").style.fontStyle = "normal";
        document.getElementById("connection").style.fontStyle = "normal";
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }
}

Answer 1

假设元素属于input类型在CSS中：

input{
  color: #000000;
  font-style: normal;
}

.invalid {
   color: #961515;
   font-style: italic;
}

在JS中：

function submitCheck() {
    var hasConnection = formTest.connection.value.length != 0; 
    var hasLocation = formTest.location.value.length != 0;

    document.getElementById("connection").className = hasConnection ? "" : "invalid";
    document.getElementById("location").className = hasLocation ? "" : "invalid";

    if(hasConnection && hasLocation){
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }
}

注意，我使用原始方法设置类名，更完整的解决方案使用此answer或使用类似jquery的框架。

我认为这是一种更好的方法，因为它将样式与javascript分开。

Answer 2

只需从全部重复的4行中创建一个函数：

function setStyles(color1, color2, style1, style2) {
    document.getElementById("connection").style.color = color1;
    document.getElementById("location").style.color = color2;
    document.getElementById("connection").style.fontStyle = style1;
    document.getElementById("location").style.fontStyle = style2;
}

您可以使用简单的函数调用替换每个块，例如：

setStyles("#961515", "#000000", "italic", "normal");

您的更新代码如下所示：

function submitCheck() {
    if (formTest.connection.value.length==0 && formTest.location.value.length==0) {
        setStyles("#961515", "#961515", "italic", "italic");
    } else if (formTest.connection.value.length==0 && formTest.location.value.length!=0) {
        setStyles(...);
    } else {
        ...
    }
}

Answer 3

您可以创建一个函数来设置适当的样式，而不是重复所有样式四次。您还可以将保存的值存储在变量中：

function setStyles(connectionColor, connectionStyle,
                   locationColor, locationStyle) {
    document.getElementById("connection").style.color = connectionColor;
    document.getElementById("location").style.color = locationColor;
    document.getElementById("connection").style.fontStyle = connectionStyle;
    document.getElementById("location").style.fontStyle = locationStyle;
}

function submitCheck() {
    var connectionVal = formTest.connection.value,
        locationVal = formTest.location.value;

    if (connectionVal.length==0 && locationVal.length==0) {
        setStyle("#961515", "italic", "#961515", "italic");
    } else if (connectionVal.length==0 && locationVal.length!=0) {
        setStyle("#961515", "italic", "#000000", "normal");
    } else if (locationVal.length==0 && !connectionVal.length!=0) {
        setStyle("#000000", "normal", "#961515", "italic");
    } else {
        setStyle("#000000", "normal", "#000000", "normal");
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }
}

这无论如何都不会改变你的逻辑，它只会让它更短更容易阅读。但是，如果分别测试连接和位置字段，也可以稍微优化逻辑。

不是单独设置颜色和斜体/正常，而是最好在CSS样式表中定义一些类，并根据需要添加/删除这些类。它不仅使您的JS更简单易读，而且避免在JS中嵌入特定的颜色。

Answer 4

我更喜欢使用表驱动的方法来减少复制和重复执行的代码量：

function submitCheck() {
    // arrays of values
    //   connection color, location color, connection fontStyle, location fontStyle
    var values = [
        ["#961515", "#961515", "italic", "italic"],
        ["#961515", "#000000", "italic", "normal"],
        ["#000000", "#961515", "normal", "italic"],
        ["#000000", "#000000", "normal", "normal"]
    ];

    var conLength = formTest.connection.value.length;
    var locLength = formTest.location.value.length;
    var conn = document.getElementById("connection");
    var loc = document.getElementById("location");
    var index;

    if (conLength == 0 && locLength == 0) {
        index = 0;
    } else if (conLength == 0 && locLength != 0) {
        index = 1;
    } else if (conLength != 0 && locaLength == 0) {
        index = 2;
    } else {
        index = 3;
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }

    var data = values[index];
    conn.style.color = data[0];
    loc.style.color = data[1];
    conn.style.fontStyle = data[2];
    loc.style.fontStyle = data[3];
}

Javascript：如何简化这个JS样式列表？

4 个答案: