Question

<!DOCTYPE html>
<html>
<head>
<title>SignUp</title>
<link rel="stylesheet" href="style/style.css">
<style type="text/css">
#signup{ 
    margin-left:200px;
    margin-top:90px;
}
#signup input{
    margin:2px 0px 20px 10px;
    background-color:#EAEAEA;
}

#signup button{
    font-size:16px;
margin-top:50px;
margin-left:150px;
width:100px;
height:31px;
background-color:#333333;
text-align:center;
color:#FFF;
}   
</style>
<script>
function signup()
{
var x1=document.forms["signUpForm"]["username"].value;

var x2=document.forms["signUpForm"]["email"].value;

var x3=document.forms["signUpForm"]["password1"].value;

var x4=document.forms["signUpForm"]["password2"].value; 

var x5="";                                                      /* document.forms[0].radios is an array filled with all radio buttons. Loop through all of                                                       them and see if it is checked. If one is, transfer the value of that radio button to                                                         user_input.*/
var atpos=x2.indexOf("@");
var dotpos=x2.lastIndexOf("."); 
if(document.getElementById('gender_Male').checked) {
    x5="Male";

}else if(document.getElementById('gender_Female').checked) {
  x5="Female";
}

if (x1==null || x1==""|| x2==null || x2==""||  x3==null || x3=="" || x4==null || x4=="" || x5=="")
  {
  alert("Please fill all the required fields");
  return false;
  }

else if (x3!=x4){
    alert("Psswords do not match");
  return false;
}

else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x2.length)
  {
  alert("Not a valid e-mail address");
  return false;

  }
else{

    return document.forms[0].action = "signupdata.php";
}
}

</script>

</head>
<body>
<?php include_once("template_pageTop.php"); ?>
<div id=signup>
<h2>Sign Up Here </h2>
<form  method="post" name="signUpForm" >
<table  border="0" cellpadding="2">
  <tr>
    <td >UserName:*</td>
    <td ><input type="text" name="username" size="30"  ></td>
  </tr>
  <tr>
    <td>Email:*</td>
    <td><input type="text" name="email" size="30" ></td>
  </tr>

  <tr>
    <td>Password:*</td>
    <td><input type="password" name="password1" size="30" ></td>
  </tr>
  <tr>
    <td>Confirm Password:*</td>
    <td><input type="password" name="password2" size="30" ></td>
  </tr>

  <tr>
    <td>Gender:*</td>
    <td ><input type="radio" name="gender" value="male" id="gender_Male">Male<br/>
        <input type="radio" name="gender" value="female" id="gender_Female">Female</td>
  </tr>

  <tr>
      <td><button  onclick= "signup()" >SignUp</button> </td>

      <td><button type="reset" >Cancel</button> </td>
  </tr>

</table>

</form>
</div>
</body>
</html>

我需要在这种形式中改进几件事。

如果没有错误，如何使注册页面可见。（点击signUp后我去了一个空白的signupdata.php页面。如何停止此）
如何检查单选按钮（性别）是否已填写。我的表格不会检查。
当一个字段未填充并且错误消息弹出后，所有填充区域（包括正确填充）都会消失。有没有办法停止此操作并保留所有正确填充的数据。

我对网页设计完全陌生。请帮忙。

Answer 1

如果单选按钮是强制性的，最好默认检查一个单选按钮。

<input type="radio" name="gender" checked  value="male" >Male<br/>
        <input type="radio" name="gender" value="female">Female</td>

Answer 2

    <input type="radio" name="gender" checked  value="male" id="male" >Male<br/>
    <input type="radio" name="gender" value="female" id="female">Female</td>

  if(document.getElementById('male').checked) {
      //Male radio button is checked
  }else if(document.getElementById('female').checked) {
      //Female is checked
  }

表格验证。单选按钮检查不起作用和形式中的一些其他问题

2 个答案: