巧妙错误信息提示

最新推荐文章于 2024-05-16 16:17:42 发布

CJamie

最新推荐文章于 2024-05-16 16:17:42 发布

阅读量1k

点赞数

分类专栏： web开发(html与javascript) 文章标签： class border stylesheet function 手机 table

本文链接：https://blog.csdn.net/CJamie/article/details/839441

版权

web开发(html与javascript) 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

例子（tip.html）：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="tip/tip.css">
<title>巧妙错误信息提示</title>
<script language="javascript">
<!--
function Trim(str){
if(str == null) return "";
if(str.length == 0) return "";
var i=0,j=str.length-1,chr;
for(;i<str.length;i++){
    chr=str.charAt(i);
    if(chr != ' ') break;
}
for(;j>-1;j--){
    chr=str.charAt(j);
    if(chr!=' ') break;
}
if(i>j) return "";
return str.substring(i,j+1);
}

<body>
<table width="608" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
     <td colspan="3" class="bgcolor2" height="22"> <span class="font14 color b">修改个人信息</      span>
</td>
</tr>
<tr>
<td rowspan="3" class="bgcolor2" width="1"></td>
<td bgcolor="#ffffff" height="1" width="606"></td>
<td rowspan="3" class="bgcolor2" width="1"></td>
</tr>
<tr>
<td bgcolor="#f4f4f4" height="22" width="606"> <span class="color2 font14 b">     添加/修改手机号码：</span></td>
</tr>
<tr>
<td style="padding: 20px;" bgcolor="white" height="50">

正确的信息将有助于您享受更便捷的e龙旅行网预订服务。<br><br>
<span class="font14 b">第一步</span><br><br>
<table>
<tr>
  <td colspan="2"><b>请输入新的手机号码：</b><input name="modmob:txtMobile" maxlength="11" id=        "modmob_txtMobile" class="input_login" type="text"></td>
</tr>
<tr>
  <td width="90"></td>
  <td id="errMobile" style="display: none; color: rgb(192, 0, 0);" align="left">
   <img src="index.aspx_files/reg_d3.gif" align="absmiddle" border="0">            提示：请输入手机号.</td>
</tr>
<tr>
  <td></td>
  <td id="errMobileTwo" style="display: none; color: rgb(192, 0, 0);" align="left">
<img src="index.aspx_files/reg_d3.gif" align="absmiddle" border="0">           提示：无效的手机号码！请核实重新输入</td>
</tr>
<tr>
  <td></td>
  <td id="errMobileMsg" style="color: rgb(192, 0, 0);" align="left"><span id=         "modmob_lblSystemError"></span></td>
</tr>
</table><br><br>

<span class="color2">提示：为了保证注册资料真实有效，修改手机号码需要您进行验证确认，<br><br>
   点击“确认并提交”按钮后，请按提示完成后继续操作。</span><br><br><br>
   <center><input name="modmob:imgElongButton" id="modmob_imgElongButton" onClick="return           check();" src="index.aspx_files/button_1.gif" alt="" border="0" type="image"></center><br>
</td>
</tr>
   <tr>
<td colspan="3" class="bgcolor2" height="1"></td>
</tr>
</table>
</body>
</html>

样式表（tip/tip.css）：

<!--
body {margin:0px;background:white;font-size:12px;font-family:宋体;}
td {font-size:12px;}
.title_td {background:#6CAEC4;height:30px;}
.left_td {background:#D1E7F2;text-align:center;}
.height1 {line-height:160%;}
.bgcolor1 {background:#6CAEC4;}
.bgcolor2 {background:#D1E7F2;}
.bgcolor3 {background:#F5FFFE; height:20px;font-size:12px;}
#bgcolor3 {background:#F5FFFE;}
.bgcolor4 {background:#FFFBE5;}
.bgcolor5 {background:#F4F4F4;}
.bgcolor6 {background:#FFFFFF;}

#table_div table {border-color:#F5FFFE;border-width:0px;width:608px;border-collapse:collapse;border:1px #D1E7F2 solid;}
#table_div td {border-bottom:1px #D1E7F2 solid;}

.family1 {font-family:Verdana;}
.family2 {font-family:Arial;}
.color  {color:#217F98;}
.color1  {color:#000000;}
.color2  {color:#FF9900;}
.b   {font-weight:bolder;}
.pic_1  {padding-top:3px;}
.pic_1b  {padding-top:11px;}
.pic_2  {padding-top:9px;}
.pic_2b  {padding-top:5px;}
.pic_3  {padding-top:10px;}
.pic_3b  {padding-top:4px;}
.pic_4  {padding-top:10px;}
.pic_4b  {padding-top:5px;}
.pic_4c  {padding-top:3px;}
.font14  {font-size:14.7px;}
.right_p {padding-right:22px;}
.td_pd1  {padding:8px 8px 8px 12px;}
.td_pd2  {padding:5px 8px 5px 12px;}
.td_pd3  {padding:3px 12px;}
.td_pd4  {padding:3px;}
.input_login{width:190px;height:21px;border:1px #A1CBDB solid;}
.input_2 {border:1px #7E9DB9 solid;height:21px;}

A:link,A:visited {font-size:12px;color:#237F98; text-decoration: underline}
A:active,A:hover {font-size:12px;color:#FF9900; text-decoration: underline}
.input_reg {width:130px;height:21px;border:1px #A5ACB2 solid;}

a.link_myelong:link,a.link_myelong:visited {font-size:12px;color:#FF9900;text-decoration:underline;}
a.link_myelong:active,a.link_myelong:hover {font-size:12px;color:#FF9900;text-decoration:underline;}

.ValidatorStyle{VISIBILITY:hidden;COLOR:#f86300;}
.ValidatorDisplayStyle{VISIBILITY:none;COLOR:#f86300;}

.eButton
{
BORDER-RIGHT: #006600 thin solid; BORDER-TOP: #cccccc thin solid; FONT-WEIGHT: bold;
FONT-SIZE: 12px; TEXT-TRANSFORM: capitalize; BORDER-LEFT: #cccccc thin solid; padding-bottom:2px;
CURSOR: hand; COLOR: #ffffff; LINE-HEIGHT: 0.85; PADDING-TOP: 3px; BORDER-BOTTOM: #006600 thin solid; FONT-FAMILY: 宋体; BACKGROUND-COLOR: #009900
}
.input_1 {background:#009900;width:60px;height:22px;color:white;font-size:12px;border-top:2px #CDCBCE solid;border-right:2px #006600 solid;border-bottom:2px #006600 solid;border-left:2px #CDCBCE solid;font-weight:bolder;}
-->