脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js表单验证

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

 更新时间：2017年03月07日 14:10:18   作者：水山奇  
这篇文章主要为大家详细介绍了一个网易表单以及及时验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

来图镇楼！

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>

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

您可能感兴趣的文章:

相关文章

  • Js event事件在IE、FF兼容性问题

    Js event事件在IE、FF兼容性问题

    FF没有window.event对象。可以通过给函数的参数传递event对象。
    2011-01-01
  • javascript实现搜索筛选功能实例代码

    javascript实现搜索筛选功能实例代码

    这篇文章主要给大家介绍了关于javascript实现搜索筛选功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • javascript用正则表达式过滤空格的实现代码

    javascript用正则表达式过滤空格的实现代码

    下面小编就为大家带来一篇javascript用正则表达式过滤空格的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 了解Javascript的模块化开发

    了解Javascript的模块化开发

    这篇文章主要介绍了了解Javascript的模块化开发,本文讲解了为什么需要模块化开发,模块化开发的形成原因等内容,需要的朋友可以参考下
    2015-03-03
  • JS实现移动端实时监听输入框变化的实例代码

    JS实现移动端实时监听输入框变化的实例代码

    这篇文章主要介绍了JS实现移动端实时监听输入框变化的解决方案,需要的朋友可以参考下
    2017-04-04
  • JavaScript模拟实现自由落体效果

    JavaScript模拟实现自由落体效果

    这篇文章主要为大家详细介绍了JavaScript模拟实现自由落体效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 浅谈JavaScript中指针和地址

    浅谈JavaScript中指针和地址

    Javascript是一门基于对象的动态语言，也就是说，所有东西都是对象，一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程，其中this指针就是实现面向对象的一个很重要的特性。
    2015-07-07
  • js中事件对象和事件委托的介绍

    js中事件对象和事件委托的介绍

    今天小编就为大家分享一篇关于js中事件对象和事件委托的介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • JavaScript改变CSS样式的方法汇总

    JavaScript改变CSS样式的方法汇总

    JavaScript修改CSS有4种方法：1.修改节点style（内联样式）；2.改变节点class或id；3.写入新的css；4.替换页面中的样式表。今天主要给大家介绍下前2种，因为后两种个人不是很推荐大家使用
    2015-05-05
  • 静态页面实现 include 引入公用代码的示例

    静态页面实现 include 引入公用代码的示例

    下面小编就为大家带来一篇静态页面实现 include 引入公用代码的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论