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

          用javaScript實現表單驗證

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

           附:常用正則表達式

          主站蜘蛛池模板: 镇原县| 和静县| 巨鹿县| 克东县| 荥阳市| 塘沽区| 电白县| 屏东市| 沙洋县| 都安| 晋江市| 茶陵县| 乌鲁木齐县| 阿坝县| 阿合奇县| 麻城市| 鄄城县| 湖南省| 桐梓县| 内江市| 耒阳市| 政和县| 尚义县| 大竹县| 临邑县| 桦川县| 山丹县| 沅江市| 台南市| 雅安市| 社会| 景德镇市| 大丰市| 遵义市| 新竹市| 乌审旗| 定远县| 宁都县| 六枝特区| 张家口市| 霞浦县|