js实现表单检测和表单提示的方法

本文介绍了js实现表单检测和表单提示的方法。分享给大家参考。具体如下：

这是一种实用的形式判断和形式提示效果。如果你点击输入的文字，提示就会出来。提示框的形状更加个性化。有一个三角形符号指向输入框，需要下载两张图片。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-table-check-form-tips-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 '标题表单检测及表单提示/title style type=' text/CSS ' dl { font : normal 12px/15px Arial；相对位置：宽度： 350像素；}dt { clear:两者；float:left宽度： 130像素；padding: 4px 0 2px 0文本-左对齐：} dd {左侧浮动：宽度： 200像素；余量： 0 0 8px 0左填充left: 6px}。提示{ display:无绝对位置：右侧：-250像素；宽度： 200像素；边距-top :-4px；border: 1px固体# c93padding: 10px 12px背景： # ffc URL('图像/指针。gif’)无重复-10px 5px；}.暗示。提示指针{位置：绝对值；左侧：-10px；top: 5px宽度： 10pxheight : 19px background : URL('图像/指针。gif ')左上方不重复；}/style脚本类型=' text/JavaScript '函数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；I inputs . LengTii){ if(inputs[I])。父节点。getelementsbytagname(' span '[0]){ inputs[I].onfocus=function(){ this。parentnode。getelementsbytagname(' span ')[0]。风格。display=' inline}输入[i].onb lur=function(){ this。parentnode。getelementsbytagname(' span ')[0]。风格。显示='无'；} } } var select=document。getelementsbytagname(' select ')；for(var k=0；ks选择。长度；k ){ if(选择[k]。父节点。getelementsbytagname(' span '[0]){ select[k].onfocus=function(){ this。parentnode。getelementsbytagname(' span ')[0]。风格。display=' inline}选择k .onb lur=function(){ this。parentnode。getelementsbytagname(' span ')[0]。风格。显示='无'；} } } } AddLoadEvent(PrepareInputForHints)；/script/head dyp style=' font : normal 12px/15px Arial；'选项卡或单击字段以显示提示/PDL dt label for=' first name ' first name :/label/dt DD输入名称=' first name ' id=' first name ' type=' text '/span class=' hint '这是你妈妈小时候叫你的名字span class='提示-指针'/span/span/DD标签为='姓氏'姓氏：/标签/dt DD输入名称='姓氏' id='姓氏'类型='文本'/span class='提示'这是你的中士的名字' span class='提示'结尾有@符号和点com的东西。' span class='提示-指针/span/span/DD=年份的dtlabel出生年份：/标签/dt dd选择id='年份'名称='年'选项值=' YYYY/选项值=' 1066 ' 1066/选项值=' 1492 ' 1492/选项值=' 1776 ' 1776/选项/选择' span class='提示挑选从不' 7.span class='提示指针/span/span /dd dt class='按钮/dt dd class='按钮'输入类型='提交类='按钮'值='提交/dd/dl/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。