Question

我有一个表单有三个字段old，new和confirm.i设计了一个javascript来检查是否输入了所有字段但不幸的是这不能正常工作。请告诉我我在哪里做错了.i我是javascript的新手

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
    html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl,
    dt, dd, ol, ul, li, table, tr, td, form, object, embed,
    article, aside, command, details, fieldset,
    figcaption, figure, footer, group, header, hgroup, legend{
        margin: 0;
        padding: 0;
        border: 0;
    }
    html {
        font: 82.5% verdana, helvetica, sans-serif;
        background: #fff;
        color: #333;
        line-height: 1;
        direction: ltr;
    }
    html, body {
        position: absolute;
        height: 100%;
        min-width: 100%;
    }   
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    .button {
        min-width: 46px;
        text-align: center;
        color: #444;
        font-size: 11px;
        font-weight: bold;
        height: 27px;
        padding: 0 8px;
        line-height: 27px;
        border-radius: 2px;
        transition: all 0.218s;
        border: 1px solid #dcdcdc;
        background-color: #f5f5f5;
        cursor: default;
    }
    *+html .button {
        min-width: 70px;
    }
    button.button,
    input[type=submit].button {
        height: f1f1f1px;
        line-height: 29px;
        vertical-align: bottom;
        margin: 0;
    }
    .button:hover {
        border: 1px solid #c6c6c6;
        color: #333;
        text-decoration: none;
        transition: all 0.0s;
        background-color: #f8f8f8;
        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }
    .button:active {
        background-color: #f6f6f6;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    }
    .button:visited {
        color: #666;
    }  
    .button-submit {
        border: 1px solid #3079ed;
        color: #fff;
        text-shadow: 0 1px rgba(0,0,0,0.1);
        background-color: #4d90fe;
    }
    .button-submit:hover {
        border: 1px solid #2f5bb7;
        color: #fff;
        text-shadow: 0 1px rgba(0,0,0,0.3);
        background-color: #357ae8;
    }
    button-submit:active {
        background-color: #357ae8;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    }
    .footer-bar {
        bottom: 0;
        height: 35px;
        width: 100%;
        overflow: hidden;
    }
    .content {
        padding: 0 44px;
    }
    .table{
        padding: 0 55px
    }
    .header {
        padding: 10px 20px 5px;
        background:#00AAFF;
        border: 1px solid #e5e5e5;
        height:20px;
    }
</style>
<script type="text/javascript">
function ccheck()
{
old=document.f1.old.value;
confirm=document.f1.confirm.value;

if(old=="" || old==null)
{
alert("Plz. Enter Your City");
document.f1.old.focus();
return false;
}
if(confirm=="" || confirm==null)
{
alert("Plz. Enter Your State");
document.f1.confirm.focus();
return false;
}
return true;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body bgcolor="">
    <form action="checkPassword.jsp" onSubmit="return ccheck()">
        <div align="center" style="padding-top: 30px">
            <table  cellspacing="10" cellpadding="10">
                <tr>
                    <td width="200" height="30"><h5>Old Password</h5></td>
                    <td  height="30"><input name="old"></td>
                </tr>
                <tr>
                    <td  height="30"><h5>New Password</h5></td>
                    <td  height="30"><input name="NewPsw"></td>
                </tr>
                <tr>
                    <td height="30"><h5>Confirm Password</h5></td>
                    <td  height="30"><input name="confirm"></td>
                </tr>
            </table>
        </div>
        <div class="footer-bar"  align="center" style="padding-top: 30px">
            <table align="center" >
                <tr >
                    <td width="100" align="center"><input type="submit" class="button button-submit" value="Submit"  /></td>
                    <td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

同一http://jsfiddle.net/YCWu4/

的jsfiddle

Answer 1

尝试使用它来获取元素

old = document.getElementById('old').value;
confirm = document.getElementById('confirm').value;

并提供id来引用而不是名称：

<input id="old" name="old">

和

<input id="confirm" name="confirm">

Working DEMO

Answer 2

如果您想使用document.f1

按名称引用表单，则需要为表单命名

<form name="f1" id="f1" action="checkPassword.jsp" onsubmit="return ccheck()">

working fiddle

其他一些指示：

您的输入信息不完善。 <input/>
不要污染全局命名空间将var添加到old和confirm

Answer 3

您错过了表单标记上的name="f1"。

javascript无法正常工作

3 个答案: