一種在客戶端利用js實現對資料校驗的方法

發呆一整天發表於2013-11-24
客戶端JS
   通常為了減輕伺服器端的壓力會在客戶端利用js或其他指令碼對使用者填寫的需要提交的資料進行校驗，同時也會帶來使用者體驗的提升。下面介紹一種在客戶端利用js實現對資料進行校驗的方法，僅供參考。
     現在假設使用者需要在客戶端通過後臺進行對產品類別的新增操作，利用js實現對產品類別的校驗，校驗規則為：產品的新增只能在所屬類別的葉子節點下進行。
   產品類別在新增頁面通過一個下拉框來展現，現在需要做的就是在使用者進行產品新增操作選擇產品類別時對產品類別進行校驗，保證使用者所選的產品類別不能為非葉子節點，當使用者所選的產品類別為非葉子節點時，對使用者進行提醒。
    產品類別展現關鍵程式碼如下：
     < form action = "productadd.jsp" method = "post" onsubmit = "return checkdata()" name = "form">
          ....
    < select name ="categoryid" >
                   < option value ="0" > 所有類別</ option >
                         < script type = "text/javascript" >
                  arrLeaf[0]= "noleaf" ;//預設顯示的所有類別標記為非葉子節點
                   </ script>
                   <%
                   int index=1;
                  List<Category> categories=Category.getCategories();//獲取所有類別
                        for (Iterator<Category> it=categories.iterator();it.hasNext(); ){
                           Category c=it.next();//通過迴圈取出每個類別
           %>
                   < script type = "text/javascript" >
                  arrLeaf[' <%= index%> ']=' <%=c.isLeaf()? "leaf" :"noleaf" %> ';
                                       //通過定義的isLeaf()方法在伺服器端載入類別時判斷所取到的類別是否為葉子節點，若為葉子節點將
                                        //arrLeaf[index]賦值為:leaf；若為非葉子節點，則將arrLeaf[index]賦值為:noleaf。
                   </ script>
                   < option value =" <%= c.getId() %> " 
                                   <%= c.getId()==categoryId?"selected" :"" %> > <%=c.getName() %> </option >
             <%     
            index++;
            }
             %>
        </ select>
               ....
          </ form >

     對應的js處理函式checkdata()定義如下：
   < script type ="text/javascript" >
      <!--
             var arrLeaf= new Array();//定義一個arrLeaf陣列用於記錄每個類別是否為葉子節點
             function checkdata(){
                         if (arrLeaf[document.form.categoryid.selectedIndex]!= "leaf"){
                                                            //判斷所選中的類別是否為葉子節點，若不為葉子節點，則進行提示。
                              alert( "不能選擇非葉子節點" );
                              document.form.categoryid.focus();
                               return false ;
                              }
                               return true ;                              
                  }
      -->
       </ script>
   類別類定義如下：
   public class Category {
       private int id ;
       private int pid ;
       private String name ;
       private String descr ;
       private boolean leaf ;//是否為葉子節點
       private int grade ;
           ....
          }
     產品類定義如下：
     public class Product {
       private int id ;
       private String name ;
       private String descr ;
       private double normalPrice ;
       private double memberPrice ;
       private Timestamp pdate ;
       private int categoryId ;//該欄位參考Category的id欄位
            .....
             }

相關文章