用户注册界面

最新推荐文章于 2023-05-19 21:03:29 发布

bailanjue4452

最新推荐文章于 2023-05-19 21:03:29 发布

阅读量213

点赞数

原文链接：http://www.cnblogs.com/ywfp-lee/p/11530920.html

版权

用户注册界面

要求：

代码：

  1 <title>用户注册</title>
  2 <style type="text/css">
  3 p1{
  4 color:red;
  5 }
  6 </style>
  7 <script type = "text/javascript">
  8  function checkUser()
  9  {
 10      var user = document.getElementById("txtUser").value;
 11      if(user.length<3||user.length>5)
 12          {
 13          document.getElementById("tips_username").style.color = "red";
 14          return false;
 15          }else{
 16              document.getElementById("tips_username").style.color = "green";
 17          }
 18  }
 19  function checkPass()
 20  {
 21      var pass = document.getElementById("txtPass").value;
 22      var regs = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
 23      if(pass.length<8||pass.length>12||!regs.test(pass))
 24          {
 25          document.getElementById("tips_pass").style.color = "red";
 26          return false;
 27          }else{
 28              document.getElementById("tips_pass").style.color = "green";
 29          }
 30  }
 31  function checkRepass()
 32  {
 33      var repass = document.getElementById("txtRepass").value;
 34      if(repass != document.getElementById("txtPass").value)
 35          {
 36          document.getElementById("tips_repass").style.color = "red";
 37          return false;
 38          }else{
 39              document.getElementById("tips_repass").style.color = "green";
 40          }
 41  }
 42  function checkEmail()
 43  {
 44      var email = document.getElementById("txtEmail").value;
 45      var pattern = /^[a-zA-Z0-9#_\^\$\.\*\+\-\?\=\!\:\|\\\/\(\)\[\]\}\]\{\}]+@[a-zA-Z0-9]+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
 46      if(email.length==0||!pattern.test(email))
 47          {
 48          document.getElementById("tips_email").style.color = "red";
 49          return false;
 50          }else{
 51              document.getElementById("tips_email").style.color = "green";
 52          }
 53  }
 54  function checkNum()
 55  {
 56      var number = document.getElementById("txtNum").value;
 57      if(number.length != 11)
 58          {
 59          document.getElementById("tips_num").style.color = "red";
 60          return false;
 61          }else{
 62              document.getElementById("tips_num").style.color = "green";
 63          }
 64  }
 65  function checkName()
 66  {
 67      var name = document.getElementById("txtName").value;
 68      if(name.length<2||name.length>5)
 69          {
 70          document.getElementById("tips_name").style.color = "red";
 71          return false;
 72          }else{
 73              document.getElementById("tips_name").style.color = "green";
 74          }
 75  }
 76  function checkProv()
 77  {
 78      if(document.getElementById("selProv").selectedIndex == 0)
 79          {
 80          document.getElementById("tips_prov").style.color = "red";
 81          return false;
 82          }else{
 83              document.getElementById("tips_prov").style.color = "green";
 84          }
 85  }
 86  function checkDrct()
 87  {
 88      var directionNum = document.getElementsByName("direction");
 89      var direction = "";
 90      for(var i = 0; i < directionNum.length; i++)
 91          {
 92          if(directionNum[i].checked)
 93              direction = directionNum[i].value;
 94          }
 95      if(direction = "")
 96          {
 97          return false;
 98          }
 99  }
100 </script>
101 </head>
102 <body>
103 <form>
104 <table align = "center" width = "600">
105 <tr>
106 <td colspan = "3" align = "center"><p1>用户注册</p1></td>
107 </tr>
108 <tr>
109 <td align = "right"><p1>*</p1>用户名：</td>
110 <td><input name = "username" type = "text" id = "txtUser" onBlur = "return checkUser()"></input></td>
111 <td align = "left"><span id = "tips_username">用户名由3-5个字符组成</span></td>
112 </tr>
113 <tr>
114 <td align = "right"><p1>*</p1>密码：</td>
115 <td width = "100"><input name = "password" type = "password" id = "txtPass" onBlur = "return checkPass()"></input></td>
116 <td align = "left"><span id = "tips_pass">请输入8-12位密码(字母、数字、下划线)</span></td>
117 </tr>
118 <tr>
119 <td align = "right"><p1>*</p1>确定密码：</td>
120 <td><input name = "pwdrepeat" type = "password" id = "txtRepass" onBlur = "return checkRepass()"></input></td>
121 <td align = "left"><span id = "tips_repass">两位密码不一致</span></td>
122 </tr>
123 <tr>
124 <td align = "right"><p1>*</p1>Email：</td>
125 <td><input name = "email" type = "email" id = "txtEmail" onBlur = "return checkEmail()"></input></td>
126 <td align = "left"><span id = "tips_email">格式示例：********@163.com</span></td>
127 </tr>
128 <tr>
129 <td align = "right"><p1>*</p1>手机号码：</td>
130 <td><input name = "pnum" type = "number" id = "txtNum" onBlur = "return checkNum()"></input></td>
131 <td align = "left"><span id = "tips_num">格式示例：13803780000</span></td>
132 </tr>
133 <tr>
134 <td align = "right"><p1>*</p1>真实姓名：</td>
135 <td><input name = "realname" type = "text" id = "txtName" onBlur = "return checkName()"></input></td>
136 <td align = "left"><span id = "tips_name">由2-5个中文组成</span></td>
137 </tr>
138 <tr>
139 <td align = "right"><p1>*</p1>省份：</td>
140 <td><select name = "province" id = "selProv" onBlur = "return checkProv()">
141 <option value = "1">--请选择--</option>
142 <option value = "2">河南</option>
143 </select></td>
144 <td align = "left"><span id = "tips_prov">请选择省份</span></td>
145 </tr>
146 <tr>
147 <td align = "right"><p1>*</p1>技术方向：</td>
148 <td>
149 <input name = "direction" type = "radio" value = "Java" />Java
150 <input name = "direction" type = "radio" value = ".Net" />.Net
151 <input name = "direction" type = "radio" value = "PHP" />PHP
152 </td>
153 <td>
154 <input name = "direction" type = "radio" value = "网页" />网页
155 <input name = "direction" type = "radio" value = "IOS" />IOS
156 <input name = "direction" type = "radio" value = "Android" />Android
157 </td>
158 </tr>
159 <tr>
160 <td colspan = "3" align = "center">
161 <input type = "submit" name = "register" value = "注册"  onBlur = "return checkDrct()"/>
162 <input type = "reset" name = "reset" value = "重置" />
163 </td>
164 </tr>
165 </table>
166 </form>
167 </body>