今天研究了网易“用户注册表单”与“及时验证功能”,不得不说,无论是它的布局结构,还是验证功能,都是刷新了本真人的眼界,居然可以这样!
来图镇楼!
HTML代码:
<dl> <dt><a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>密码:</dt> <dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd> <div id="pwdId"></div> </dl> <dl> <dt>重复<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>密码:</dt><!--这里只有onblur:用户使用逻辑使然--> <dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd> <div id="repwdId"></div> </dl> <dl> <dt>性别:</dt><!--性别这里居然不给设置验证,就一个默认,本真人有点不服--> <dd><input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女" />女 </dd> </dl> <dl> <dt>真实姓名:</dt><!--aa():这名字,本真人有点醉...--> <dd><input type="text" id="realName" class="inputs" onblur="aa()"/></dd> <div id="userNameId"></div> </dl> <dl> <dt>昵称:</dt><!--解析到这里本真人终于明白了为什么有些input没有onfocus:有onfocus的是为了让表单上弹出,本真人一直认为很风骚的提示!--> <dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd> <div id="nickNameId"></div> </dl> <dl> <dt>关联手机号:</dt> <dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()"/></dd> <div id="telId"></div> </dl> <dl> <dt>保密邮箱:</dt> <dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()"/></dd> <div id="emailId"></div> </dl> <dl> <dt></dt><!--输入框为image类型的还真不常见--> <dd><input name=" " type="image" src="img/button.png"/></dd> </dl> </form> </td> <td class="bg_right"></td>
</tr>
<tr> <td class="bg bg_end_left"></td> <td class="bg bg_end"></td> <td class="bg bg_end_right"></td> </tr> </table>