多选验证

时间:2009-11-20 11:16:43

标签: javascript

我有一个HTML格式,有几个选择元素,以这种方式对它们进行验证的最佳方法是什么,没有两个选择元素可以具有相同的值,验证函数应该触发select,所以它可以检查是否有任何选项具有相同的选项值,如果是,然后提醒一些东西,我可以得到一个解释如何在javascript中写这个?

谢谢

这里有一些我要验证的HTML代码:

    <form name="forma" action="" method="POST">

    <select name="sel1">
  <option>Please select</option>
    <option>brand1</option>
    <option>brand2</option>
    <option>brand3</option>
    </select>

    <select name="sel2">
   <option>Please select</option>
    <option>brand1</option>
    <option>brand2</option>
    <option>brand3</option>
    </select>

    <select name="sel3">
    <option>Please select</option>
    <option>brand1</option>
    <option>brand2</option>
    <option>brand3</option>
    </select>

    </form>

这是稍微调整的解决方案,但就是这样:

var selectTest = function () {
    var i, j;
    sels = [document.getElementById("sel1"), document.getElementById("sel2"), document.getElementById("sel3")];
    for (i = 0; i < sels.length; i += 1) {
        for (j = i + 1; j < sels.length; j += 1) {
        if(sels[i].value != "Please select")
            {
            if (sels[i].value === sels[j].value) {
                alert("Selected values must be different");
                return;
            }
            }
        }
    }

}; 

特别tnx到austin cheney,感谢所有发布和参与的人。

3 个答案:

答案 0 :(得分:1)

首先,不要使用name属性作为脚本的参考点。 Name是指DOM中的命名元素数组,在表单控件之外的全局DOM中通常无用。使用名称数组时,很难将子节点与同一命名元素的子节点区分开来。使用id属性与脚本一起使用,而脚本是一个唯一的标识符。

var selTest = function () {
    var i, j, error = document.getElementById("error"),
    sels = [document.getElementById("sel1"), document.getElementById("sel2"), sel3 = document.getElementById("sel3")];
    for (i = 0; i < sels.length; i += 1) {
        for (j = i + 1; j < sels.length; j += 1) {
            if (sels[i].value === sels[j].value) {
                error.display = "block";
                sels[i].backgroundColor = "#f00";
                sels[j].backgroundColor = "#f00";
                return false;
            }
        }
    }
};

编辑:改变回报;返回虚假;用于onsubmit事件。

只需将选择列表的id属性值添加到上面代码中的“sels”数组即可。如果测试结果为真,则上面的代码将显示id为“error”的隐藏元素。它还会将冒犯的选择列表的背景颜色更改为红色。

答案 1 :(得分:0)

为每个选择语句赋予onchange =“validate('1')”onchange =“validate('2')”onchange =“validate('3')”。

function validate(x){ 如果(X == 1) { var selectedvalue = document.forma.sel1.options [document.forma.sel1.selectedIndex] .value if(selectedvalue == document.forma.sel2.options [document.forma.sel2.selectedIndex] .value || 的SelectedValue == document.forma.sel3.options [document.forma.sel3.selectedIndex]。价值)         警告(“没有两个值不能相同”); } esle if(x == 2) { var selectedvalue = document.forma.sel2.options [document.forma.sel2.selectedIndex] .value if(selectedvalue == document.forma.sel1.options [document.forma.sel1.selectedIndex] .value || 的SelectedValue == document.forma.sel3.options [document.forma.sel3.selectedIndex]。价值)         警告(“没有两个值不能相同”); } 否则如果(x == 3) { var selectedvalue = document.forma.sel3.options [document.forma.sel3.selectedIndex] .value if(selectedvalue == document.forma.sel1.options [document.forma.sel1.selectedIndex] .value || 的SelectedValue == document.forma.sel1.options [document.forma.sel1.selectedIndex]。价值)         警告(“没有两个值不能相同”);

} }

答案 2 :(得分:0)

我通常会建议使用jQuery,因为它可以简化它。你想要沿着这些方向做点什么。

    function hasDuplicates() {
        var dupe = false;
        $("select option:selected").each(function(i) {

            var id = $(this).parent().attr("id");
            var value = $(this).attr("value");

            $("select option:selected").each(function(c) {
                if ($(this).parent().attr("id") != id && $(this).attr("value") == value) {
                    alert("Duplicate");
                    dupe = true;
                    return false;
                }
            });

            if (dupe) {
                return false;
            }
        });

        return dupe;
    }

这将循环浏览页面上的所有选择框,并将每个选项框与每个选择框进行比较。如果存在重复值,它将弹出警报并返回true。

要在更改选择框时触发它,您需要向每个选项添加onchange事件,如下所示。每个选择都需要设置一个唯一的ID,但如果您不想添加ID,可以将对attr(“id”)的调用更改为attr(“name”)。

<select onchange="hasDuplicates()">...

性能方面,将值存储在数组中可能是有意义的,因为这个解决方案通过嵌套循环对DOM进行了大量的攻击。<​​/ p>