成员注册
上一节
下一节
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>成员注册</title> | |
| <style> | |
| table{ | |
| width:1000px; | |
| border:1px solid #0FF; | |
| border-collapse:collapse; | |
| margin:0 auto; | |
| } | |
| table td{ | |
| border:1px solid #0FF; | |
| text-align:center; | |
| padding:5px; | |
| } | |
| </style> | |
| <script> | |
| window.onload = function() | |
| { | |
| //调用用户名检测方法 | |
| checkUsername(); | |
| //调用密码检测方法 | |
| checkPassword(); | |
| //调用确认密码函数 | |
| confPassword(); | |
| }; | |
| // | |
| function checkUsername() | |
| { | |
| //获取用户名对象 | |
| var oUsername = document.getElementById('username'); | |
| var oUserinf = document.getElementById('userinf'); | |
| //用户名正则表达式 | |
| var re = /^\w{6,16}$/; | |
| //添加oUsername的键盘事件 | |
| oUsername.onkeyup = function() | |
| { | |
| var size = oUsername.value.length; | |
| if(re.test(oUsername.value)) | |
| { | |
| oUserinf.innerHTML = "现在输入"+size+"字符。用户名合法。"; | |
| oUserinf.style.color = "green"; | |
| } | |
| else | |
| { | |
| oUserinf.innerHTML = "现在输入"+size+"字符。用户名不合法！"; | |
| oUserinf.style.color = "red"; | |
| } | |
| }; | |
| } | |
| // | |
| function checkPassword() | |
| { | |
| var oPassword = document.getElementById('password'); | |
| var oPassinf = document.getElementById('passinf'); | |
| oPassword.onkeyup = function() | |
| { | |
| var size = oPassword.value.length; | |
| if(size>=6&&size<=20) | |
| { | |
| oPassinf.innerHTML="密码长度为"+size+"个字节，密码合法。"; | |
| oPassinf.style.color = "green"; | |
| }else | |
| { | |
| oPassinf.innerHTML="密码长度为"+size+"个字节，密码不合法。"; | |
| oPassinf.style.color = "red"; | |
| } | |
| }; | |
| } | |
| // | |
| function confPassword() | |
| { | |
| //alert("confPassword()"); | |
| var oPassword = document.getElementById('password'); | |
| var oConfpass = document.getElementById('confpass'); | |
| var oConfinf = document.getElementById('confinf'); | |
| oConfpass.onkeyup = function() | |
| { | |
| if(oPassword.value == oConfpass.value) | |
| { | |
| oConfinf.innerHTML="密码一致。"; | |
| oConfinf.style.color = "green"; | |
| } | |
| else | |
| { | |
| oConfinf.innerHTML="密码不一致。"; | |
| oConfinf.style.color = "red"; | |
| } | |
| }; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <table> | |
| <tr> | |
| <td width="20%"> | |
| 用户名 | |
| </td> | |
| <td width="30%"> | |
| <input type="text" id="username"/> | |
| </td> | |
| <td width="50%"> | |
| <span>用户名由数字、字母、下划线组成6-16位。</span> | |
| <span id="userinf"></span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| 密码 | |
| </td> | |
| <td> | |
| <input type="password" id="password" /> | |
| </td> | |
| <td> | |
| <span>密码：由6-20个字符组成</span> | |
| <span id="passinf"></span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| 确认密码 | |
| </td> | |
| <td> | |
| <input type="password" id="confpass"/> | |
| </td> | |
| <td> | |
| <span> | |
| 确认密码需要同密码一样。 | |
| </span> | |
| <span id="confinf"> | |
| </span> | |
| </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
