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

前端之家收集整理的这篇文章主要介绍了js仿网易表单及时验证功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

来图镇楼!

HTML代码:

<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>

<tr>
<td class="bg bg_end_left"></td>
<td class="bg bg_end"></td>
<td class="bg bg_end_right"></td>
</tr>
</table>

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

原文链接:https://www.f2er.com/js/40995.html

猜你在找的JavaScript相关文章