0 
<!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>

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

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

我对网页设计完全陌生。请提供任何帮助。

4

2 回答 2

1

如果单选按钮是强制性的，默认情况下勾选其中一个单选按钮是很好的。

<input type="radio" name="gender" checked  value="male" >Male<br/>
        <input type="radio" name="gender" value="female">Female</td>
于 2013-04-18T12:17:01.953 回答
0 
    <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
  }
于 2013-04-18T12:27:03.900 回答