Ajax带提示的验证表单实例

本文实例讲述了埃阿斯带提示的验证表单。分享给大家供大家参考。具体如下：

这是一个常用的埃阿斯表单验证程序，实时提示你输入的字符是否符合要求，简洁明快，便于修改，这是用Java脚本语言实现的，没有掺杂其它的框架类代码，因此比较实用。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-ajax-table-check-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' content-type ' content=' text/html；charset=utf-8' /title带提示的埃阿斯验证表单/title style type=' text/CSS '表单{ width :500 pxborder:1px固体# ccc}字段集{ border :0 padd :10 pxmargin :10 px位置：相对；}标签{ display : block font : normal 12px/17px verdana；}输入{横向：160px}跨度。提示{ font : normal 11px/14px verdana；背景： # eee URL(图片/BG-span-提示-灰色。gif)不重复左上角；color: # 444border:1px固体# 888;padding:5px 5px 5px 40px宽度宽度：250像素位置：绝对；边距：-12px 0 0 14px；display:none}字段集。做得好跨度。提示{背景： # 9fd 680 URL(图片/BG-span-提示-做得好。jpg)不重复左上角；边框颜色： # 749 e5ccolor: # 000}字段集。有点神跨度。提示{背景： # ffffcc URL(图片/BG-span-提示-有点神。jpg)不重复左上角；边框颜色： # cc 9933}字段集。做得好{背景：透明URL(图像/BG-字段集-做得好。gif)无重复194 px 19px}字段集。kinda god {背景：透明URL(图片/BG-字段设置-kinda god。gif)无重复194 px 19px}/style脚本类型=' text/JavaScript '函数checkUsernameForLength(WhatYoutyped){ var字段集=WhatYoutyped。父节点；var txt=WhatYoutyped . value if(txt。长度5){字段集。类名='干得好'；} else {字段集。类名=' '；} }函数检查密码(WhitYoutyped){ var字段集=WhitYoutyped。父节点；var txt=WhatYoutyped . value if(txt。长度3 txt。长度8){字段集。类名='挺神'；} else if(txt。长度7){字段集。类名='干得好'；} else {字段集。类名=' '；} }函数检查电子邮件(WhitYoutyped){ var字段集=WhitYoutyped。父节点；var txt=whatYouTyped.value如果(/^\w .-]?\w )*@\w ([\ .-]?\w )*(\ .\w{2，3}) $/.测试(txt)){字段集。类名='干得好'；} else {字段集。类名=' '；} }函数addLoadEvent(func){ var oldonload=window。onloadwindow.onload！=' function '){ window。onload=func} else { window。onload=function(){ oldonload()；func()；} } }函数preparinputForHints(){ var inputs=document。getelementsbytagname(' input ')；for(var I=0；iinputes . lentigi){ 0输入[i].onfocus=function(){ this。parentnode。getelementsbytagname(' span ')[0]。风格。display=' inline}输入[i].onb lur=function(){ this。parentnode。getelementsbytagname(' span ')[0]。风格。显示='无'；} } } AddLoadEvent(PrepareInputForHints)；/script/head dyform操作=' # ' name=' basic form ' id=' basic form '字段集标签为='用户名'用户名：/标签输入类型=' text ' id=' username ' on key up=' checkusername for length(this)；'/span class='提示'用户名最低6位哦/span/fieldsetfieldset标签为='密码'密码：/标签输入类型=' password ' id=' password ' on key up=' check password(这个)；'/span class='提示'密码需要四到8位哦/span/fieldsetfieldset标签为='电子邮件'电子邮件地址：/标签输入类型=' text ' id=' email ' on key up=' check email(this)；/span='提示'您可以毫无顾虑地输入您的真实地址-我们不收垃圾邮件！/span/fieldset/form/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。