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以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
版权声明:js仿网易表单及时验证功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。