posts - 10, comments - 9, trackbacks - 0, articles - 17

用javaScript实现表单验证

Posted on 2008-11-25 19:14 wesley1987 阅读(362) 评论(0)  编辑  收藏 所属分类: struts学习项目

**
* Check form
*/
function checkForm(vform){
    for(var i=0;i<vform.elements.length;i++){      
 
        if(vform.elements[i].type=="text"){
            var checkResult=checkTextBox(vform.elements[i]);
            var name=vform.elements[i].getAttribute("name");           
           
            if(checkResult){
                document.getElementById(name+"Msg").style.display="none";//alert(vform.elements.length+" - "+i+checkResult);
            }
            else{       
                document.getElementById(name+"Msg").style.display="inline";
                vform.elements[i].focus();
                return false;
            }               
        }
    }
 
    return true;
}

/**//**
* Check text field in the form
*/
function checkTextBox(vTextBox){
    var validChar=vTextBox.getAttribute("validChar");
    var isRequired=vTextBox.getAttribute("isRequired");
    var inputValue=vTextBox.value;
   
    if(isRequired!="true" && inputValue.length<1){
        return true;
    }
    else{
        var regexStr=validChar;
        var regex=new RegExp(regexStr);
        return regex.test(inputValue);
    }
}

/**//**
* Remove Extra Char in textbox
*/
function removeExtraChar(vTextBox,event){
    var maxlength=parseInt(vTextBox.getAttribute("maxlength"));
    var inputValue=vTextBox.value;
   
    if(inputValue.length>=maxlength){
        event.keyCode=9;
    }
}


/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
对应的JSP表单 :
<script src="<%=path%>/xxx.js" type="text/javascript"></script>
<form action="<%=path%>/addOffer.do" method="post" onsubmit="return checkForm(this);">
<table align="center" width="434" border="1">
<tr>
  <td width="117">供应商名称(必填):</td>
  <td width="300"><div align="left">&nbsp;<input name="offername" 
                         type="text" 
                         maxlength="15"  
                         height="16"
                         isRequired="true"
                         validChar="^[\u4E00-\u9FA5]{2,10}$"                 //用于验证此text的正则表达式
                         onfocus="this.style.backgroundColor='#e6e6e6'"
                                onblur="this.style.backgroundColor='#ffffff'" />
 
 <p id="offernameMsg" style="display:none">请输入2-10位汉字</p>
  </div>
  </td>
</tr>
<tr>
  <td width="117">地址:</td>
  <td><div align="left">&nbsp;<input name="offeradd"
           type="text"
           maxlength="20" 
           height="16"
            validChar="^[\u4E00-\u9FA5\w]+$"
          onfocus="this.style.backgroundColor='#e6e6e6'"
                             onblur="this.style.backgroundColor='#ffffff'"/>
 <p id="offeraddMsg" style="display:none">请勿含特殊符号(含空格)</p>
  </div></td></tr>
<tr>
  <td>联系人:</td>
  <td><div align="left">&nbsp;<input name="connecter" type="text" height="16"
              maxlength="10"
              validChar="^[\u4E00-\u9FA5\w]+$"
             onfocus="this.style.backgroundColor='#e6e6e6'"
                                onblur="this.style.backgroundColor='#ffffff'"/>
 <p id="connecterMsg" style="display:none">请勿含特殊符号(含空格)</p>
  </div></td>
</tr>
</table></form>

 附:常用正则表达式


只有注册用户登录后才能发表评论。


网站导航: