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


Posted in Javascript onMarch 07, 2017

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

来图镇楼!

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

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>网易新用户注册页面</title>
 <script type="text/javascript" src="js/js1.js"></script>
 <link href="css/style1.css" rel="external nofollow" rel="stylesheet" />
 <script type="text/javascript">
  function aa(){
   var reg = /[\u4e00-\u9fa5]/g;/*这里本真人,已做修改*/
   var name = document.getElementById("realName").value;
   if(reg.test(name)==false){
    alert("只能为汉字");
   }else{
    alert("正确");
   }
  }
 </script>
</head>
<body>
 <!--logo位置-->
 <div id="header"><img src="img/register_logo.png" alt="logo"/></div>
 <div id="main">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
   <!--看不见的第一行-->
   <tr>
    <td class="bg bg_top_left"></td>
    <td class="bg_top"></td>
    <td class="bg bg_top_right"></td>
   </tr>
   <!--看得见的第二行-->
   <tr>
    <td class="bg_left"></td>
    <td class="content">
    <!--表单提交,因本真人是解析来着,算不出网易服务器地址,就不详细介绍了-->
    <form action="" method="post" name="myform" onsubmit="return checkForm()">
     <!--居然采用自定义列表,嘿嘿-->
     <dl>
      <dt>通行证用户名:</dt>
      <dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()"/>@163.com</dd>
      <div id="userNameId"></div><!--这里当做提示框!-->
     </dl>

     <dl>
      <dt>登录密码:</dt>
      <dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
      <div id="pwdId"></div>
     </dl>

     <dl>
      <dt>重复登录密码:</dt><!--这里只有onblur:用户使用逻辑使然-->
      <dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd>
      <div id="repwdId"></div>
     </dl>

     <dl>
      <dt>性别:</dt><!--性别这里居然不给设置验证,就一个默认,本真人有点不服-->
      <dd><input type="radio" 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>
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 跨域访问问题解决方法
Dec 02 Javascript
20个最新的jQuery插件
Jan 13 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
简单实现js页面切换功能
Jan 10 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
vue中template的三种写法示例
Oct 21 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
JS完成画圆圈的小球
Mar 07 #Javascript
jQuery Chosen通用初始化
Mar 07 #Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 #Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 #Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 #Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 #Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 #Javascript
You might like
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
JavaScript 常用函数
2009/12/30 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
python转换摩斯密码示例
2014/02/16 Python
python网络编程学习笔记(一)
2014/06/09 Python
用Python编写简单的定时器的方法
2015/05/02 Python
Python3多线程操作简单示例
2018/05/22 Python
详解python的四种内置数据结构
2019/03/19 Python
python使用KNN算法识别手写数字
2019/04/25 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
会计电算化专业应届大学生求职信
2013/10/22 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
初中地理教学反思
2016/02/19 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python