Question

<html>
<head>
</head>
<body>
<script type="text/javascript" language="javascript">




function isUpperCase(str) {
return str === str.toUpperCase();
}

function validate()
{
    var flag=0;
    var x=document.getElementById("f").value;
    var y=document.getElementById("l").value;
    var w=document.getElementById("c").value;
    var p=document.getElementById("o").value;
   //the first name should be all capital and less than 20 characters
    if(x.length>20 || x=="" || isUpperCase(x)==false)
    {
        flag=1;
document.getElementById("f").style.backgroundColor = "yellow";  
    }
     //the last name should be less than 15 characters and all capital
    if(y.length>15 || y=="" || isUpperCase(y)==false)
    {
        flag=1;
document.getElementById("l").style.backgroundColor = "yellow";          
    }
    //the customer number length should be 5
    if(w=="" || w.length!=5 )
    {
        flag=1;
    document.getElementById("c").style.backgroundColor = "yellow";          
    }
    //order num length should be 5,first character should be 'p' and next three should be numbers.
    if(p.length!=5 || p.charAt(0)!='p' || isNaN(p.substr(1,3)))
    {
        flag=1;
     document.getElementById("o").style.backgroundColor = "yellow";     
    }
    if(flag==1)
        alert("check the colored boxes");
    return flag;

}

</script>
<form name="myform" onsubmit=" return validate()" action="" method="post">
    first name:<input id="f" type="text" name="first"><br>
    last name:<input id="l" type="text" name="last"><br>
    customer no:<input id="c" type="text" name="customer_num"><br>
    order no:<input id="o" type="text" name="order_num"><br>
    date:<input id="d" type="date" name="date"><br>
    <input type="submit" value="submit">
</form>

</body>
</html>

我是javascript的新手，我无法找到功能验证的任何问题。函数validate检查表单输入中的约束，如果不满足条件，则输入的背景颜色会发生变化，最后会弹出一个警告，要求检查彩色框。

Answer 1

问题是您要返回1或0

如果您想阻止表单发送，则必须返回false

Answer 2

我认为您的错误是在前两个if语句中使用了赋值运算符=而不是比较运算符==。尝试更改

if(x.length>20 || x="" || isUpperCase(x)==false)

到

if(x.length>20 || x=="" || isUpperCase(x)==false)

与y if语句相同。

Answer 3

您好，请更改您的操作以指向您的功能。你也忘记了代码中的'='

 if(y.length>15 || y=="" || isUpperCase(y)==false)

。它将解决问题。

<form name="myform" action="javascript:validate();">
    first name:<input id="f" type="text" name="first"><br>
    last name:<input id="l" type="text" name="last"><br>
    customer no:<input id="c" type="text" name="customer_num"><br>
    order no:<input id="o" type="text" name="order_num"><br>
    date:<input id="d" type="date" name="date"><br>
    <input type="submit" value="submit">
</form>

最终代码将像

function isUpperCase(str) {
return str === str.toUpperCase();
}

function validate(e)
{
    var flag=0;
    var x=document.getElementById("f").value;
    var y=document.getElementById("l").value;
    var w=document.getElementById("c").value;
    var p=document.getElementById("o").value;
   //the first name should be all capital and less than 20 characters
    if(x.length>20 || x=="" || isUpperCase(x)==false)
    {
        flag=1;
document.getElementById("f").style.backgroundColor = "yellow";  
    }
     //the last name should be less than 15 characters and all capital
    if(y.length>15 || y=="" || isUpperCase(y)==false)
    {
        flag=1;
document.getElementById("l").style.backgroundColor = "yellow";          
    }
    //the customer number length should be 5
    if(w=="" || w.length!=5 )
    {
        flag=1;
    document.getElementById("c").style.backgroundColor = "yellow";          
    }
    //order num length should be 5,first character should be 'p' and next three should be numbers.
    if(p.length!=5 || p.charAt(0)!='p' || isNaN(p.substr(1,3)))
    {
        flag=1;
     document.getElementById("o").style.backgroundColor = "yellow";     
    }
    if(flag==1)
        alert("check the colored boxes");
    return flag;

}

<html>
<head>
</head>
<body>
<form name="myform" action="javascript:validate();">
    first name:<input id="f" type="text" name="first"><br>
    last name:<input id="l" type="text" name="last"><br>
    customer no:<input id="c" type="text" name="customer_num"><br>
    order no:<input id="o" type="text" name="order_num"><br>
    date:<input id="d" type="date" name="date"><br>
    <input type="submit" value="submit">
</form>
</body>
</html>

在提交表单时，它未经过验证，但会被刷新

3 个答案: