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

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

来图镇楼！

超文本标记语言代码：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www .w3。org/TR/HTML 4/严格。DTD ' HTML xmlns=' http://www .w3。org/1999/XHTML ' lang=' EN ' head meta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8' /标题网易新用户注册页面/title脚本类型=' text/JavaScript ' src=' http : js/js1。js '/脚本链接href=' CSS/style 1。CSS“rel=”外部no跟随“rel=”样式表/script type=' text/JavaScript ' function aa(){ var reg=/[\ u4e 00-\ u9 F5]/g；/*这里本真人，已做修改*/var name=文档。getelementbyid('真实姓名').价值；if(reg。测试(名称)=false){ alert('只能为汉字');}else{ alert('正确');} }/脚本/床头！-标志位置-div id=' header ' img src=' http : img/register _ logo。png ' alt=' logo '/div div id=' main '表格宽度='100% '边框='0 '单元格填充='0 '单元格间距='0 '!-看不见的第一行-tr TD class=' BG BG _ top _ left '/TD TD TD class=' BG _ top '/TD TD TD TD class=' BG BG _ top _ right '/TD/tr！-看得见的第二行-tr TD class=' BG _ left '/TD TD TD class=' content '！-表单提交，因本真人是解析来着，算不出网易服务器地址，就不详细介绍了-form action=' method=' post ' name=' my form ' on submit=' return CheckFORm()'！-居然采用自定义列表，嘿嘿- dl dt通行证用户名：/dt ddin put type=' text ' id=' userName ' class=' inputs userName width ' onfocus=' userNameFocus()' onblur='userNameBlur()'/@163.com/dd div id=' userNameId '/div！-这里当做提示框！- /dl dl dt登录密码：/dt ddin put type=' password ' id=' pwd ' class=' inputs ' on focus=' pwd focus()' on bulr=' pwd bulr()'//DD div id=' pwdId '/div/dl dl dt重复登录密码：/dt！-这里只有onblur:用户使用逻辑使然-ddin put type=' password ' id=' repwd ' class=' inputs ' on bulr=' repwdBlur()'//DD div id=' repwdId '/div/dl dl dt性别：/dt！-性别这里居然不给设置验证，就一个默认，本真人有点不服-ddin put type=' radio ' name=' sex ' value='男选中='选中'/男输入类型='收音机'名称='性'值='女' /女/dd /dl dl dt真实姓名：/dt！-aa(:)这名字，本真人有点醉.-ddin put type=' text ' id=' real name ' class=' inputs ' on bulr=' aa()'//DD div id=' userNameId '/div/dl dl dt昵称：/dt！-解析到这里本真人终于明白了为什么有些投入没有onfocus:有聚焦的是为了让表单上弹出，本真人一直认为很风骚的提示！-ddin put type=' text ' id='昵称' class=' inputs ' onfocus='昵称焦点()“在布尔=”上昵称模糊()'//dd div id='昵称Id'/div /dl dl dt关联手机号：/dt ddin put type=' text ' id=' tel ' class=' inputs ' on focus=' TelFocus()' on bulr=' TelBlur()'//DD div id=' TelID '/div/dl dt保密邮箱：/dt ddin put type=' text ' id=' email ' class=' inputs ' onfocus=' email focus()' on bulr=' email blur()'//DD div id=' emailId '/div/dl dt/dt！-输入框为图像类型的还真不常见-ddin put name=' type=' image ' src=' http : img/button。png '/DD/dl/form/TD TD class=' BG _ right '/TD/tr！-看不见的第三行-tr TD class=' BG BG _ end _ left '/TD TD TD class=' BG BG _ end '/TD TD TD TD class=' BG BG _ end _ right '/TD/tr/table/div/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。