Question

我正在提交表单，并且已经过验证以确保我的文本框有值。如果false，警报显示正常，但我无法获得边框以更改颜色。我似乎无法找出我做错了什么。

<script>
    function validate(){
        var dob = document.forms["ppm"]["dob"].value;
        if(dob == ""){
            document.getElementById("dob").style.border="red";
            alert("Error");
            return false;
        }
    }
</script>

<form onsubmit="return validate()" name="ppm" id="ppm" action="index.php" method="post">

<p>What is your DOB<br />
<input type="text" name="dob" id="dob" value="" />

<input type="submit" name="Continue" value="Continue"/>
</form>

Answer 1

在边框可见之前，必须给边框一些宽度。您可以使用单独的clob属性：

create table tab1 (col1 number, sql_stmt clob);

insert into tab1(col1, sql_stmt) values(1, 'select col1 from tab1 where col_2=100');
insert into tab1(col1, sql_stmt) values(2, 'select col1 from tab1 where col_2=1000');
insert into tab1(col1, sql_stmt) values(3, 'select col1 from tab1 where col_3=100');

insert into tab1(col1, sql_stmt) values(4, 'select col1 from tab1 where col_2 = 100');
insert into tab1(col1, sql_stmt) values(5, 'select col1 from tab1 where col_2 = 1000');
insert into tab1(col1, sql_stmt) values(6, 'select col1 from tab1 where col_3 = 100');

insert into tab1(col1, sql_stmt) values(7, 'select col1 from tab1 where tab1.col_2 = 100');
insert into tab1(col1, sql_stmt) values(8, 'select col1 from tab1 where tab1.col_2 = 1000');
insert into tab1(col1, sql_stmt) values(9, 'select col1 from tab1 where tab1.col_3 = 100');

commit;

或者，坚持border*但提供完整的边框值（宽度，样式和颜色）：

document.getElementById("dob").style.borderColor ="red";
document.getElementById("dob").style.borderWidth ="2px";

这是一个与原作略有修改的工作示例：

border

document.getElementById("dob").style.border = "2px solid red";

我很想将你的function validate() { var dob = document.getElementById('dob').value; if (dob == null || dob == '') { document.getElementById("dob").style.border = "2px solid red"; alert("Error"); return false; } }函数改写成这样的东西：

<p>What is your DOB
  <br />
  <input type="text" name="dob" id="dob" value="" />

  <input type="button" onclick="validate()" name="Continue" value="Continue" />

Answer 2

您的段落（</p>）上缺少结束标记。使用style.border时，还需要设置border属性的所有部分。以下是一个工作示例。

＆＃13;

    var isValid = function () {
        var dob = document.forms["ppm"]["dob"].value;
    
        if (dob === "") {
            document.getElementById("dob").style.border = "solid 1px red";
            
            alert("Error");
            
            return false;
        }
        
        return true;
    };

＆＃13;

    <form onsubmit="return isValid();" name="ppm" id="ppm" action="index.php" method="post">
        <p>What is your DOB</p>
        <br />
        <input type="text" name="dob" id="dob" value="" />
        <input type="submit" name="Continue" value="Continue" />
    </form>

＆＃13;

在javascript中更改边框颜色的问题

2 个答案: