前几天跟朋友一起写了个简单的用户注册页面
也没啥要求就是随便写写 然后加上了几个简单的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>