Question

全部

我正在创建一个仅注册一个“帐户”的基本表单，仅此而已。我开始通过验证进行工作。它适用于验证所有框的空字段，但是当它进入警报以说表单已在“提交”单击时提交时，它不起作用。它没有引发任何错误，因此在逻辑上可能是我放置它的地方，但是我已将其移入validateform函数的内部和外部，但不会发送警报。

在第一个if语句上注意，您将看到我开始在其中添加用户名长度验证的额外约束。我一次只工作一点，所以还没有完成并经过测试。我只是想确保在继续前进之前弹出警报已提交。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Registration Form</title>
<script language="JavaScript">

//Here will go all the functions and codes.
function validateForm(){

var username = document.forms["registerForm"]["username"];               
var password = document.forms["registerForm"]["password"];    
var fName = document.forms["registerForm"]["fName"];  
var lName =  document.forms["registerForm"]["lName"];  
var dob = document.forms["registerForm"]["dob"];  
var email = document.forms["registerForm"]["email"];
var number = document.forms["registerForm"]["number"];

if((username.value == "") && (username.value >= 8)){
window.alert("Please enter your username or is 8 characters");

return false;
}

if(password.value == ""){
window.alert("Please enter your password");

return false;
}

if(fName.value == ""){
window.alert("Please enter your first name");

return false;
}

if(lName.value == ""){
window.alert("Please enter your last name");

return false;
}

if(dob.value == ""){
window.alert("Please enter your Date Of Birth");

return false;
}

if(email.value == ""){
window.alert("Please enter your E-Mail");

return false;
}

if(number.value == ""){
window.alert("Please enter your phone number");

return false;
}

alert("Your information as been submitted!");
} 





</script>
</head>
<body>
<h2>Form:</h2>
All boxes are to be filled out except for phone
<form name="registerForm">

<h3>Username (At least 8 characters)</h3>
<input type = "text" name = "username" value = "">
<P>

<h3>Password (At least 8 characters)</h3>
<input type = "text" name = "password" value = "">
<P>

<h3>First Name</h3>
<input type = "text" name = "fName" value = "">
<P>

<h3>Last Name</h3>
<input type = "text" name = "lName" value = "">
<P>

<h3>Date Of Birth (In MM/DD/YYYY format)</h3>
<input type = "text" name = "dob" value = "">
<P>

<h3>Email</h3>
<input type = "text" name = "email" value = "">
<P>

<h3>Phone Number (optional must be in XXX-XXX-XXXX format)</h3>
<input type = "text" name = "number" value = "">
<P>


<input type = "button" value = "Register" onClick = "validateForm()">

<input type="reset">
<p>

</form>
</html>

Answer 1

要检查用户名的长度，请使用username.value.length

if ((username.value == "") && (username.value.length <= 8)) {
        window.alert("Please enter your username or is 8 characters");
        return false;
      }

我希望这就是你的期望

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Registration Form</title>
  <script language="JavaScript">
    function validateForm() {

      var username = document.forms["registerForm"]["username"];
      var password = document.forms["registerForm"]["password"];
      var fName = document.forms["registerForm"]["fName"];
      var lName = document.forms["registerForm"]["lName"];
      var dob = document.forms["registerForm"]["dob"];
      var email = document.forms["registerForm"]["email"];
      var number = document.forms["registerForm"]["number"];
      if ((username.value == "") && (username.value.length <= 8)) {
        window.alert("Please enter your username or is 8 characters");
        return false;
      }
      if (password.value == "") {
        window.alert("Please enter your password");
        return false;
      }
      if (fName.value == "") {
        window.alert("Please enter your first name");
        return false;
      }
      if (lName.value == "") {
        window.alert("Please enter your last name");
        return false;
      }
      if (dob.value == "") {
        window.alert("Please enter your Date Of Birth");
        return false;
      }
      if (email.value == "") {
        window.alert("Please enter your E-Mail");
        return false;
      }
      if (number.value == "") {
        window.alert("Please enter your phone number");
        return false;
      }
      alert("Your information as been submitted!");
    }
  </script>
</head>

<body>
  <h2>Form:</h2>
  All boxes are to be filled out except for phone
  <form name="registerForm">
    <h3>Username (At least 8 characters)</h3>
    <input type="text" name="username" value="">
    <P>
      <h3>Password (At least 8 characters)</h3>
      <input type="text" name="password" value="">
      <P>

        <h3>First Name</h3>
        <input type="text" name="fName" value="">
        <P>
          <h3>Last Name</h3>
          <input type="text" name="lName" value="">
          <P>
            <h3>Date Of Birth (In MM/DD/YYYY format)</h3>
            <input type="text" name="dob" value="">
            <P>
              <h3>Email</h3>
              <input type="text" name="email" value="">
              <P>
                <h3>Phone Number (optional must be in XXX-XXX-XXXX format)</h3>
                <input type="text" name="number" value="">
                <P>
                  <input type="button" value="Register" onClick="validateForm()">
                  <input type="reset">
                  <p>
  </form>

</html>

验证提交表单上的按钮

1 个答案: