支持ff/ie的form内容必填出错提示

来源：互联网发布：阿里云克隆编辑：程序博客网时间：2024/05/16 11:20

当前控件填写有误,则后面显示表示错误图片,并首个对象获得焦点,ff/ie通过

可以修改一下js达到不必每个控件后面先放一图片,可以动态生成,再消掉<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">*{margin:0;padding:0}body,div,dl,dt,dd,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,textarea,blockquote,th,td { margin:0; padding:0;}table {border-collapse:collapse; font-size:12px;}img{border:0;}input,textarea,select,button{ padding:1px; font-size:12px; vertical-align:middle;}ol,ul { list-style:none;}caption,th { text-align:left;}cite,em{ font-style:normal;}button {cursor:pointer;}body { font-family:Verdana, Arial, Helvetica, sans-serif,"宋体"; color:#474747; line-height:20px;}textarea,input,select,body{font-size:12px;}h1,h2{ font-size:14px;}h3, h4, h5, h6, p, ol, ul, li, dl, dd{ font-size:12px;}fieldset,form{ background:none; border:none; padding:0; margin:0;}.clearfloat{clear:both;font-size:0;line-height:0; display:block; height:0; visibility:hidden;}.cl{clear:both;font-size:0;line-height:0;height:0;}a{text-decoration:none;}a:hover{text-decoration:underline;}.ibm-container-body td{ padding:3px 0; vertical-align:top;}.ibm-required{ color:#f00;}</style></head><body id="ibm-com"><div class="ibm-container ibm-alternate-six" style="width:800px; margin:0 auto; padding:12px; background:#d4dfef;"><div class="ibm-container-body" style="background:#fff; padding:12px;" mce_style="background:#fff; padding:12px;"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="right"><a href="#" mce_href="#"><b>关闭 ×</b></a></td></tr> <tr> <td><p>标有星号（<span class="ibm-required">*</span>）的项目为完成本操作所要求必须填写的项目，其它项目为可选择填写项目。如果您不希望向我们提供所要求的信息，请选择浏览器上的“退回”键以退回上一页面，或关闭窗口或本浏览页。</p></td> </tr> <tr> <td><div id="showButton" style="display:none;" mce_style="display:none;"><div class="ibm-rule"><hr /></div></div></td> </tr> <tr> <td><div class="ibm-rule"><hr /></div> <p style="padding:4px 12px;" mce_style="padding:4px 12px;"><strong>这是一条专为贵宾设立的 7x24 沟通桥梁，这里有一群专业、热诚的服务专员，帮您找到最适合的信息、专家和资源，解决您 IT 的问题。请用几秒钟时间填写下表。我们将尽快给您回电话。</strong></p> <div class="ibm-rule"><hr /></div></td> </tr> <tr> <td> <form method="post" action="http://www.zdnet.com.cn/files/2010invest/ibm_2_25/insert.php" class="ibm-column-form" name="regform" onsubmit="return check_submit();"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="right" width="120"><label for="Name"><strong>姓名</strong><span class="ibm-required">*</span></label></td> <td width="10"></td> <td><input type="text" name="Name" size="35" class="iform" id="Name"/> <input type=image id="Name_img" name ="Name_img" alt="" src="error.gif" mce_src="error.gif" width=16 height=16 style="display:none;" mce_style="display:none;"> </td> </tr> <tr> <td align="right"></td> <td width="10" height="10"></td> <td></td> </tr> <tr> <td align="right"><label for="CompanyName"><strong>单位名称</strong><span class="ibm-required">*</span></label></td> <td width="10"></td> <td><input type="text" name="CompanyName" size="50" class="iform" id="CompanyName"/> <input type=image id="CompanyName_img" name ="CompanyName_img" alt="" src="error.gif" mce_src="error.gif" width=16 height=16 style="display:none;" mce_style="display:none;"></td> </tr> <tr> <td align="right"><p style="display:none" mce_style="display:none"> <input type="hidden" name="mboname" value="ENR_DATA" /><input type="hidden" name="action" value="CREATE" /><input type="hidden" name="newfields" value="REQID,Solution,Name,Title,Industry,CompanyName,Department,Position,Email,Cellphone,Province,City,fax,Postcode,optin,optout,ISTEST,LEXT02" /><input type="hidden" name="writablefields" value="" /><input type="hidden" name="requiredfields" value="" /><input type="hidden" name="ISTEST" value="N" /><input type="hidden" name="REQID" value="17" /><input type="hidden" name="Solution" value="Contact IBM RAQ" /><input type="hidden" name="ReturnURL" value="http://www-900.ibm.com/cn/promotion/raq/thanks.shtml" /> </p></td> <td width="10" height="10"></td> <td></td> </tr> <tr> <td align="right"> <p><label for="Industry"><strong>所在行业</strong><span class="ibm-required">*</span></label><span></span></p></td> <td width="10"></td> <td><select name="Industry" class="iform" id="Industry"> <option value="" selected="selected">请选择...</option> <option value="电信业">电信业</option> <option value="信息业">信息业</option> <option value="教育及科研">教育及科研</option> <option value="银行业">银行业</option> <option value="政府及军队">政府及军队</option> <option value="卫生及医院">卫生及医院</option> <option value="制造业">制造业</option> <option value="媒体业">媒体业</option> <option value="保险业">保险业</option> <option value="石油化工">石油化工</option> <option value="零售及批发">零售及批发</option> <option value="证券业">证券业</option> <option value="旅游及交通运输业">旅游及交通运输业</option> <option value="公共事业">公共事业</option> <option value="其它">其它</option> </select> <input type=image id="Industry_img" name ="Industry_img" alt="" src="error.gif" mce_src="error.gif" width=16 height=16 style="display:none;" mce_style="display:none;"></td> </tr> <tr> <td align="right"></td> <td width="10"></td> <td></td> </tr> <tr> <td align="right"></td> <td width="10" height="10"></td> <td></td> </tr> <tr> <td align="right"></td> <td width="10"></td> <td></td> </tr> <tr> <td align="right"><label for="Position"><strong>职务</strong><span class="ibm-required">*</span></label></td> <td width="10" height="10"></td> <td><select name="Position" class="iform" id="Position"> <option value="" selected="selected">请选择...</option> <option value="总经理/总裁/CEO">总经理/总裁/CEO</option> <option value="销售经理">销售经理</option> <option value="销售人员">销售人员</option> <option value="市场经理">市场经理</option> <option value="市场人员">市场人员</option> <option value="生产经理">生产经理</option> <option value="生产人员">生产人员</option> <option value="运作经理">运作经理</option> <option value="运作人员">运作人员</option> <option value="信息经理/CIO">信息经理/CIO</option> <option value="IT工程师">IT工程师</option> <option value="财务经理">财务经理</option> <option value="财务人员">财务人员</option> <option value="采购经理">采购经理</option> <option value="采购人员">采购人员</option> <option value="人事经理">人事经理</option> <option value="人事人员">人事人员</option> <option value="培训经理">培训经理</option> <option value="培训人员">培训人员</option> <option value="其它">其它</option> </select> <input type=image id="Position_img" name ="Position_img" alt="" src="error.gif" mce_src="error.gif" width=16 height=16 style="display:none;" mce_style="display:none;"></td> </tr> <tr> <td align="right"></td> <td width="10" height="10"></td> <td></td> </tr> <tr> <td align="right"></td> <td width="10"></td> <td></td> </tr> <tr> <td align="right"><label for="Tel1"><strong>电话</strong><span class="ibm-required" id="phoneSpan">*</span></label> </td> <td width="10" height="10"></td> <td> <span class="ibm-input-group"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> 办公电话: <label for="Tel1">区号</label> <input type="text" name="Tel1" size="6" class="iform" id="Tel1"/> <label for="Tel2">总机/直线</label> <input type="text" name="Tel2" size="6" class="iform" id="Tel2"/> <label for="Tel3">分机</label> <input type="text" name="Tel3" size="6" class="iform" id="Tel3"/></td> </tr> <tr> <td height="10"></td> </tr> <tr> <td> <label for="Cellphone">或手机</label> <input type="text" name="Cellphone" size="35" class="iform" id="Cellphone"/> <input type=image id="Tel1_img" name ="Tel1_img" alt="" src="error.gif" mce_src="error.gif" width=16 height=16 style="display:none;" mce_style="display:none;"></td> </tr></table> </span> </td> </tr> <tr> <td align="right"></td> <td width="10"></td> <td></td> </tr> <tr> <td align="right"></td> <td width="10" height="10"></td> <td></td> </tr> <tr> <td align="right"></td> <td width="10"></td> <td></td> </tr> <tr> <td align="right"><label for="Email"><strong>电子信箱</strong><span class="ibm-required">*</span></label></td> <td width="10" height="10"></td> <td><input type="text" name="Email" size="35" class="iform" id="Email"/> <input type=image id="Email_img" name ="Email_img" alt="" src="error.gif" mce_src="error.gif" width=16 height=16 style="display:none;" mce_style="display:none;"></td> </tr> <tr> <td align="right"></td> <td width="10"></td> <td></td> </tr> <tr> <td align="right"></td> <td width="10" height="10"></td> <td></td> </tr> <tr> <td align="right"></td> <td width="10"></td> <td></td> </tr> <tr> <td align="right"><label for="Province"><strong>单位所在省/直辖市</strong><span class="ibm-required">*</span></label></td> <td width="10" height="10"></td> <td><span><select name="Province" class="iform" id="Province"> <option value="" selected="selected">请选择</option> <option value="北京">北京</option> <option value="重庆">重庆</option> <option value="福建">福建</option> <option value="甘肃">甘肃</option> <option value="广东">广东</option> <option value="广西">广西</option> <option value="贵州">贵州</option> <option value="海南">海南</option> <option value="河北">河北</option> <option value="黑龙江">黑龙江</option> <option value="河南">河南</option> <option value="湖北">湖北</option> <option value="湖南">湖南</option> <option value="内蒙古">内蒙古</option> <option value="江苏">江苏</option> <option value="江西">江西</option> <option value="吉林">吉林</option> <option value="辽宁">辽宁</option> <option value="宁夏">宁夏</option> <option value="青海">青海</option> <option value="山西">山西</option> <option value="陕西">陕西</option> <option value="山东">山东</option> <option value="上海">上海</option> <option value="安徽">安徽</option> <option value="四川">四川</option> <option value="天津">天津</option> <option value="西藏">西藏</option> <option value="新疆">新疆</option> <option value="云南">云南</option> <option value="浙江">浙江</option> <option value="其他">其他</option> </select> 城市 <input type="text" name="City" size="20" class="iform" id="City" /><label for="City" class="ibm-access">城市 <input type=image id="Province_img" name ="Province_img" alt="" src="error.gif" mce_src="error.gif" width=16 height=16 style="display:none;" mce_style="display:none;"></label></span></td> </tr> <tr> <td align="right"></td> <td width="10"></td> <td></td> </tr> <tr> <td align="right"></td> <td width="10" height="10"></td> <td></td> </tr> <tr> <td align="right"></td> <td width="10"></td> <td></td> </tr> <tr> <td align="right"><label for="LEXT02"><strong>其他信息</strong></label></td> <td width="10" height="10"></td> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <textarea id="LEXT02" cols="45" rows="4" name="LEXT02" style="width:280px;"> （您可以在这里简短填写您的问题或需求，以便服务专员更高效地为您服务。请注意: ThinkPad 笔记本、ThinkCentre 台式电脑和其他的 PC 产品，现在是 Lenovo 公司的产品。） 现在，您只拨冗填写反馈，即有机会赢取新年好礼。请告诉我们以下哪些因素会驱动您所在的企业进行系统升级或迁移： 虚拟化解决方案，以实现 IT 系统的优化和整合面临业务增长或合并需要替换遗留软件当前供应商不再对您现有的硬件、软件提供技术支持需要整合成百上千台长期积累的服务器降低成本的需求管控风险的需求自动布置的需求降低能耗的需求其他(请注明)：