表单js 验证(效果)

<style>
.error {
 border-left:1px solid #FF7300;
 border-right:1px solid #FF7300;
 border-top:1px solid #FF7300;
 border-bottom: 1px solid #FF7300;
 background-color: #FFF5D8;
 height:18px;
 padding:2px
}
.tishi {
 border-left:1px solid #485E00;
 border-right:1px solid #485E00;
 border-top:1px solid #485E00;
 border-bottom: 1px solid #485E00;
 background-color: #F7FFDD;
 height:18px;
 padding:2px;
 color:#485E00;
}
</style>
<script language="JavaScript" type="text/javascript">
var validatedInfo  = "<font color='#999999'>填写正确。</font>";
var requireErrorInfo = "<font color='#ff0000'>此项为必填项。</font><br>";

function formEle(infobox,errormsg){
 document.getElementById(infobox).innerHTML= errormsg;
 document.getElementById(infobox).className = "tishi"
}

//正确提示
function formSucc(infobox){
 document.getElementById(infobox).innerHTML="<img src='http://www.net.cn/images/pic_right.gif'>&nbsp;" + validatedInfo;
 document.getElementById(infobox).className = ""
}

//错误提示
function formErr(infobox,errormsg){
 document.getElementById(infobox).innerHTML="<img src='http://www.net.cn/images/pic_error.gif' width='12' height='12'>&nbsp;" +  errormsg;
 document.getElementById(infobox).className = "error"
}

function Info_Check(vobject,infobox){
 var b_flag;
 switch(infobox){
  case "encom":
   b_flag = check_com(vobject,infobox);
   break;
  case "enren":
   b_flag = check_ren(vobject,infobox);
   break;
  case "enaddr":
   b_flag = check_addr(vobject,infobox);
   break;
  }
  
 
 if(b_flag)formSucc(infobox);
}

function check_com(vobject,infobox){
 if(vobject.value==''){
  formErr(infobox,"请输入公司名称");
  return false;
 }else{
  return true;
 }
}

function check_ren(vobject,infobox){
 if(vobject.value==''){
  formErr(infobox,"请输入联系人");
  return false;
 }else{
  return true;
 }
}
function check_addr(vobject,infobox){
 if(vobject.value==''){
  formErr(infobox,"请输入地址");
  return false;
 }else{
  return true;
 }
}

</script>

<form name="form1" method="post" action="">
  <table width="500" border="0" align="center" cellpadding="3" cellspacing="0">
    <tr>
      <td width="80" align="right">公司名称</td>
      <td width="200"><input name="com" type="text" id="com" οnblur="Info_Check(this,'encom')" οnclick="formEle('encom',requireErrorInfo)" /></td>
      <td><div id="encom"></div></td>
    </tr>
    <tr>
      <td align="right">联系人</td>
      <td><input name="ren" type="text" id="ren" οnblur="Info_Check(this,'enren')" οnclick="formEle('enren',requireErrorInfo)" /></td>
      <td><div id="enren"></div></td>
    </tr>
    <tr>
      <td align="right">地址      </td>
      <td><input name="addr" type="text" id="addr" οnblur="Info_Check(this,'enaddr')" οnclick="formEle('enaddr',requireErrorInfo)" /></td>
      <td><div id="enaddr"></div></td>
    </tr>
  </table>
</form>