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

          用javaScript實現表單驗證

          Posted on 2008-11-25 19:14 wesley1987 閱讀(379) 評論(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>

           附:常用正則表達式

          主站蜘蛛池模板: 蕉岭县| 库尔勒市| 微博| 德庆县| 迭部县| 奉节县| 砀山县| 和政县| 怀集县| 志丹县| 伊宁县| 体育| 翼城县| 延寿县| 闵行区| 定陶县| 紫金县| 岳阳市| 乳山市| 建宁县| 安庆市| 青铜峡市| 南木林县| 且末县| 宜城市| 文成县| 五家渠市| 新丰县| 上犹县| 延长县| 宝清县| 双桥区| 井陉县| 五大连池市| 汤阴县| 荔波县| 甘谷县| 托克逊县| 康平县| 鹤岗市| 杨浦区|