html代码:
1 <form>
2 <fieldset>
3 <legend>请您认真填写用户注册表</legend>
4 <table>
5 <tr>
6 <th>用户名:</th>
7 <td><input type="text" id="username" size="20"></td>
8 </tr>
9 <tr>
10 <th>密码：</th>
11 <td><input type="password" id="pwd" size="22"></td>
12 </tr>
13 <tr>
14 <th>确认密码：</th>
15 <td><input type="password" id="pawd" size="22"></td>
16 </tr>
17 <tr>
18 <th>性别：</th>
19 <td>
20 <input type="radio" name="sex" value="m">男
21 <input type="radio" name="sex" value="f">女
22 </td>
23 </tr>
24 <tr>
25 <th>Email：</th>
26 <td><input type="text" name="email" size="20"></td>
27 </tr>
28 <tr>
29 <td colspan="2" align="center">
30 <input type="button" value="注册" onclick="reg()">
31 <input type="reset" value="重置">
32 </td>
33 </tr>
34 </table>
35 </fieldset>
36 </form>
JavaScript代码:
1 <script>
2 function reg(){
3 var u = document.getElementById("username").value;
4 var p1 = document.getElementById("pwd").value;
5 var p2 = document.getElementById("pawd").value;
6 var arr = document.getElementsByName("sex");
7 var len = arr.length;
8 var s = "";
9 for(var i = 0; i < len; i++){
10 if(arr[i].checked){
11 s = arr[i].value;
12 break;
13 }
14 }
15 var e = document.getElementById("email").value;
16
17 var email_reg = /^[\w]{1,}@[\w]{1,}\.[\w.]{2,8}$/;
18
19 if(u == ""){
20 alert("用户未填写!");
21 }else if(u.length < 5){
22 alert("用户名不能少于5个字符");
23 }else if(p1 == ""){
24 alert("密码为填写!");
25 }else if(p1.length < 6){
26 alert("密码不能小于6个字符");
27 }else if(p1 !== p2){
28 alert("两次输入的密码不一致,请从新输入");
29 }else if(s == ""){
30 alert("性别不能为空");
31 }else if(e == ""){
32 alert("邮箱不能为空");
33 }else if(!email_reg.test(e)){
34 alert("邮箱格式不正确");
35 }else{
36 var aa = "<font size='20' color='red'>感谢您的注册,欢迎您加入到hfphp team</font><br>";
37 var uu = "<font color='red'>您注册的用户名是："+u+"</font>";
38 var pp = "<br><font color='red'>密码是："+p1+"</font>";
39 var ee = "<br><font color='red'>邮箱是:"+e+"</font>";
40 document.write(aa+uu+pp+ee);
41 }
42
43 }
44 </script>
忘记写注释 就在这啰嗦几句
程序是分布执行的首先判断的是用户名,接着是密码,性别,email.
程序注册完成，模拟实现跳转,输出用户注册信息. 很是简单了！呵呵~~