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>

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

赞 (0)

相关推荐

  • JavaScript 表单验证正则表达式大全[推荐]

    具体和函数结合的使用方法,还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 复制代码 代码如下: 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?

  • 收藏的js表单验证控制代码大全第1/3页

    关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单: 目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制  2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判断是否输入英文.只能输入英文 4:js只能输入数字,判断数字.验证数字.检测数字.判断是否为数字.只能输入数字 5:只能输入英文字符和数字 6: js email验证 .js 判断email .信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js

  • AngularJS实现表单验证

    虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>     <p&

  • javascript表单验证 - Parsley.js使用和配置

    在线演示 大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧,使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能.是不是超棒? 今天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能,基于它的强大DOM-API. 主要特性 •基于超棒的用户体验 •超级方便配置 •超轻量级(压缩后12K),支持jQuery和Zepto •超简单,只需要简单配置DOM-API,类似jQuery的data API •绝对免费

  • JavaScript 使用正则表达式进行表单验证的示例代码

    JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 复制代码 代码如下: function regIsDigit(fData) { var reg = new RegExp("^[0-9]$"); return (reg.test(fData)); } 利用这则表达式获取字符串的长度 复制代码 代码如下: function regDataLength(fData) { var valLength = fData.length; var reg = n

  • js 常用正则表达式表单验证代码

    正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表

  • AngularJS使用ngMessages进行表单验证

    AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="

  • 工作中常用到的JS表单验证代码(包括例子)

    复制代码 代码如下: ////----------------Author Teng------------- //验证是否为空 function check_blank(obj, obj_name){ if(obj.value != ''){ return true; }else{ alert(obj_name + "所填不能为空!"); obj.value = ""; return false; } } //过滤输入字符的长度 function check_st

  • javascript制作的简单注册模块表单验证

    javascript制作的简单注册模块表单验证

    一个注册框  进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;mar

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

随机推荐