js仿网易表单及时验证功能

今天研究了网易“用户注册表单”与“及时验证功能”，不得不说，无论是它的布局结构，还是验证功能，都是刷新了本真人的眼界，居然可以这样！

来图镇楼！

HTML代码：

rush:xhtml;"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

网易<a href="https://www.jb51.cc/tag/xinyonghu/" target="_blank" class="keywords">新用户</a><a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a><a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>

通行证用户名：

 <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()"/&gt;</dd>
  <div id="pwdId"&gt;</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()"/&gt;</dd>
  <div id="repwdId"&gt;</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"/&gt;男
   <input type="radio" name="sex" value="女" />女
  </dd>       
 </dl>

 <dl>
  <dt>真实姓名：</dt><!--aa():这名字,本真人有点醉...-->
  <dd><input type="text" id="realName" class="inputs" onblur="aa()"/&gt;</dd>
  <div id="userNameId"&gt;</div>
 </dl>

 <dl>
  <dt>昵称：</dt><!--解析到这里本真人终于明白了为什么有些input没有onfocus:有onfocus的是为了让表单上弹出，本真人一直认为很风骚的提示！-->
  <dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/&gt;</dd>
  <div id="nickNameId"&gt;</div>
 </dl>

 <dl>
  <dt>关联手机号：</dt>
  <dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()"/&gt;</dd>
  <div id="telId"&gt;</div>
 </dl>

 <dl>
  <dt>保密邮箱：</dt>
  <dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()"/&gt;</dd>
  <div id="emailId"&gt;</div>
 </dl>

 <dl>
  <dt></dt><!--输入框为image类型的还真不常见-->
  <dd><input name=" " type="image" src="img/button.png"/&gt;</dd>
 </dl>

</form>
</td&gt;

<td class="bg_right"&gt;</td&gt;

</tr>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

js仿网易表单及时验证功能

相关推荐