简单的Web登录

前几天跟朋友一起写了个简单的用户注册页面

也没啥要求就是随便写写然后加上了几个简单的JS验证，本来想删的还是放在这里吧，也许什么时候就用到了

PS：JS学习的是真的是很折磨人一大段代码一个标点少写了几乎整个就完了，现在一般都是简单的用一下JS，等以后用到难的了再回过头在学习吧

这个注册界面没什么样式，就是验证用户名、密码、正则表达式验证一下邮箱，在实际运用中一般都是浏览器端加上服务器段一起验证的，过几天再把服务器段的验证加上吧，以为没有服务器段的验证

很不安全，如果没有服务器验证几乎就相当于门上挂了把锁，仅仅是挂那里了，用户也许可以通过链接直接进去。。。废话不多说直接就是代码吧真的没有啥技术含量暂时先放这里吧有时间了再继续补点

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <script type="text/javascript">
  7     function fun1()
  8     {
  9         var name = document.getElementById('name').value;/*获得用户名*/
 10         var FirstCharOfName = name.charAt(0);/*取得用户名第一个字符*/
 11         if((!isNaN(FirstCharOfName))||name==""||name==null)/*isNaN()是用来判断参数是不是数字 不是数字的话返回true 否则你懂的*/
 12         {
 13             alert("用户名不能为空也不能以数字开头！！")
 14             name="";/*再把name的输入框清空*/
 15         }
 16         else
 17         {
 18             var password = document.getElementById("password").value;/*获得用户密码*/
 19             var repassword = document.getElementById("repassword").value;/*获得用户第二次输入的密码*/
 20             if(!(password==repassword))
 21             {
 22                 alert("密码不一致!");
 23             }
 24             else
 25                 {
 26                     var CheckMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2}$)/;
 27                     var email = document.getElementById("email").value;
 28                     
 29                     var flag = CheckMail.test(email);
 30                     
 31                     if(flag)
 32                     {
 33                         alert("恭喜你注册成功！ 请到"+email+"收件箱中确认！"+"茹屌 肯定会亲测 ~ ~");
 34                     }
 35                     else
 36                     {
 37                         alert("请输入正确的邮箱！！");
 38                     }
 39                 }
 40         }
 41         
 42     }
 43 </script>
 44 
 45 </head>
 46 
 47 <body>
 48     <table>
 49     <form>
 50         <table width="500" border="0" align="center">
 51   <caption align="left">
 52     用户注册
 53   </caption>
 54   <br /><br />
 55   <tr>
 56     <td width="100px">用户名：</td>
 57     <td><input  type="text" name="username" id="name" style=" 170px;"/></td>
 58   </tr>
 59   <tr>
 60     <td>密码：</td>
 61     <td><input  type="password" id="password" style=" 170px;"/></td>
 62   </tr>
 63   <tr>
 64     <td>确认密码：</td>
 65     <td><input  type="password" id="repassword" style=" 170px;"/></td>
 66   </tr>
 67   
 68     <tr>
 69     <td>性别：</td>
 70     <td><input name="sex" type="radio" value="male" /> 男
 71         <input name="sex" type="radio" value="female" />女</td>
 72       </tr>
 73     
 74   <tr>
 75     <td>城市:</td>
 76     <td> <select name="userType">
 77     <option value="1">北京</option>
 78     <option value="3">河南</option>
 79     <option value="4">郑州</option>
 80     <option value="5">广州</option>
 81     <option value="5">杭州</option>
 82     <option value="2">上海</option> </select></td>
 83   </tr>
 84 
 85   <tr>
 86     <td>兴趣爱好：</td>
 87     <td><input type="checkbox" name="hobby" value="reading" /> 阅读
 88         <input type="checkbox" name="hobby" value="swimming" />游泳
 89         <input type="checkbox" name="hobby" value="music" />音乐
 90         <input type="checkbox" name="hobby" value="running" />慢跑
 91         </td>
 92   </tr>
 93   <tr>
 94     <td>电子邮件：</td>
 95     <td><input  type="text" id="email" style=" 170px;"/></td>
 96   </tr>
 97   
 98  <tr>
 99      <td>
100         <input type="submit" value="登录"  onclick="fun1()"/>
101     </td>
102     <td>
103         <input type="reset" value="注销" />
104     </td>
105  </tr>
106 </table>
107 </form>
108     </table>
109     
110 
111     
112 </body>
113 </html>