Question

我的代码如下所示，这是html部分。

    <html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="regi.js" ></script>
</head>
<body class="regbody">
    <form align="center" method="POST" action="submit()" name="regform">
    <div id="regpgdiv">
        <span class="indextext">Fill in the details below to get registered! </span><br><br><br><br><br><br>
        <input type="text" name="regfname" id="ip" value="Enter name" onfocus="if(this.value == 'Enter name') { this.value = ''; }"  onblur="if(this.value == '') { this.value = 'Enter name'; }" /> <br><br>
        <input type="text" name="reguname" id="ip" value="Enter Desired Username" onfocus="if(this.value == 'Enter Desired Username') { this.value = ''; }"  onblur="if(this.value == '') { this.value = 'Enter Desired Username'; }" /> <br><br>
        <input type="password" name="regpwd" id="ip" value="Select Password" onfocus="if(this.value == 'Select Password') { this.value = ''; }"  onblur="if(this.value == '') { this.value = 'Select Password'; }" /> <br><br>
        <input type="password" name="cregpwd" id="ip" value="Re-enter Password" onfocus="if(this.value == 'Re-enter Password') { this.value = ''; }"  onblur="if(this.value == '') { this.value = 'Re-enter Password'; }" /> <br><br>
        <input type="submit" value="Register" id="credsub" >
    </div>
</form>
</body>

并且提交函数的下面是js代码

function Submit(){

var fname = document.form.regfname.value,
uname= document.form.reguname.value,

fpassword = document.form.regpwd.value,
cfpassword= document.form.cregpwd.value;

if( uname == "" || uname == "Enter Desired Username")
{
 document.form.reguname.focus() ;
 document.getElementById("errorBox").innerHTML = "enter the username";
 return false;
}
  if( fname == "" || fname == "Enter name")
     {
      document.form.regfname.focus() ;
    document.getElementById("errorBox").innerHTML = "enter the first name";
     return false;
  }  



  if(fpassword == "" || fpassword == "Select password" )
     {
   document.form.regpwd.focus();
   document.getElementById("errorBox").innerHTML = "enter the password";
   return false;
  }

    if (!(cfpassword.equals(fpassword)) )
     {  
    document.form.cregpwd.focus();
     document.getElementById("errorBox").innerHTML = "doesnt match";
      return false;

     }

       if(fname != '' &&  fpassword != '' && cfpassword != '' && uname!= ''){
     document.getElementById("errorBox").innerHTML = "form submitted successfully";
    }

    }

当我点击regiter按钮时，它说这个网页已经找到了。我是javascript的新手，需要帮助。提前谢谢。

Answer 1

又一次更新 - 我意识到您的Javascript代码中存在引用DOM对象的错误（以及验证逻辑中的拼写错误），下面是修改后的代码。简而言之，我已将id添加到表单元素以进行引用，在验证逻辑中，您应该检查Select Password而不是Select password。

HTML表单

<form align="center" method="POST" action="TARGET-PAGE-TO-HANDLE-DATA" name="regform" id="regform" onsubmit="return Submit()">
    <div id="regpgdiv">
        <span class="indextext">Fill in the details below to get registered! </span><br><br><br><br><br><br>
        <input type="text" name="regfname" id="fname" value="Enter name" onfocus="if(this.value == 'Enter name') { this.value = ''; }"  onblur="if(this.value == '') { this.value = 'Enter name'; }" /> <br><br>
        <input type="text" name="reguname" id="uname" value="Enter Desired Username" onfocus="if(this.value == 'Enter Desired Username') { this.value = ''; }"  onblur="if(this.value == '') { this.value = 'Enter Desired Username'; }" /> <br><br>
        <input type="password" name="regpwd" id="regpwd" value="Select Password" onfocus="if(this.value == 'Select Password') { this.value = ''; }"  onblur="if(this.value == '') { this.value = 'Select Password'; }" /> <br><br>
        <input type="password" name="cregpwd" id="cregpwd" value="Re-enter Password" onfocus="if(this.value == 'Re-enter Password') { this.value = ''; }"  onblur="if(this.value == '') { this.value = 'Re-enter Password'; }" /> <br><br>
        <input type="submit" value="Register" id="credsub" >    
    </div>
</form>

JS

function Submit() {

var fname = document.getElementById("fname");
var uname= document.getElementById("uname");

var fpassword = document.getElementById("regpwd");
var cfpassword= document.getElementById("cregpwd");

    if (uname.value == "" || uname.value == "Enter Desired Username") {
        uname.focus() ;
        document.getElementById("errorBox").innerHTML = "enter the username";
        return false;
    }

    if (fname.value == "" || fname.value == "Enter name") {
        fname.focus();
        document.getElementById("errorBox").innerHTML = "enter the first name";
        return false;
    }  

    if (fpassword.value == "" || fpassword.value == "Select Password" ) {
        fpassword.focus();
        document.getElementById("errorBox").innerHTML = "enter the password";
        return false;
    }

    if (cfpassword.value != fpassword.value) {  
        cfpassword.focus();
        document.getElementById("errorBox").innerHTML = "doesnt match";
        return false;
    }

    if (fname.value != '' &&  fpassword.value != '' && cfpassword.value != '' && uname.value != '') {
        document.getElementById("errorBox").innerHTML = "form submitted successfully";
    }
    return true;
}

已更新 - 感谢Useless Code提供了有用的建议，我已相应修改了相应代码，以使用onSubmit代替onClick事件。

您的HTML代码应为：

<form align="center" method="POST" action="TARGET-PAGE-TO-HANDLE-DATA" name="regform" onsubmit="return Submit();">

action属性指定处理表单数据的目标页面。 onSubmit属性指定单击表单中的提交按钮时要执行的Javascript函数。

Answer 2

正如评论中所述，onsubmit在这种情况下更合适。放置在onclick属性中的JavaScript将在单击HTML元素时触发，但对于表单，您实际上需要在提交时执行的代码。所以：

<form align="center" method="POST" action="self" name="regform" onsubmit="Submit()">

会更接近。但是，通常认为使用＆＃34; on＆＃34;用于处理JavaScript中的事件的属性。首先，它将您的JavaScript与语义HTML混合在一起，这可能会使调试变得更加困难，并且会混合单独的问题。但这也意味着无论你在＆＃34; on＆＃34;属性必须在全局范围内，这可能会很快成为问题。考虑一下页面上是否有多个表单;你会如何为每个人指定提交功能？

执行此操作的更可靠的方法是将您的函数放在事件侦听器中，例如：

function Submit() {
    // rest of your code here
}

document.form.regform.addEventListener('submit', Submit, false);

这里addEventListener方法首先获取事件类型字符串，并在第二个事件发生时执行该函数。关于addEventListener的MDN文章有更多。

需要js函数调用帮助

2 个答案:

HTML表单

JS